:root {
  --paper: #f5f7f2;
  --surface: #fff;
  --ink: #202720;
  --muted: #536057;
  --forest: #29402c;
  --rust: #bd5426;
  --brown: #252721;
  --line: #d2dacf;
  --band: #e9eee7;
  --shadow: none;
  --content: 1240px;
}

html { scroll-padding-top: 105px; }
body { background: var(--paper); line-height: 1.5; }
body::before { display: none; }

.site-header {
  min-height: 74px;
  padding-block: 0.9rem;
  background: rgba(250, 251, 248, 0.97);
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(20, 36, 23, 0.04);
}
.brand { gap: 0.65rem; font-size: 1.05rem; font-weight: 800; }
.brand img { width: 40px; height: 38px; }
nav { gap: 1.5rem; font-size: 0.87rem; font-weight: 700; }
nav a { transition: color 150ms ease; }
.social-link { width: 36px; height: 36px; flex-basis: 36px; border-color: var(--line); background: transparent; }

.eyebrow { color: var(--rust); font-size: 0.72rem; font-weight: 850; }
h1, h2, h3 { color: var(--ink); }
h2 { font-size: 2rem; line-height: 1.16; }
.button { border-radius: 4px; box-shadow: none; }
.button-primary { background: var(--forest); box-shadow: none; }
.button[data-event="affiliate_click"] {
  background: #bd5426;
  border-color: #bd5426;
  color: #fff;
  box-shadow: 0 8px 18px rgba(157, 61, 25, 0.18);
}
.button[data-event="affiliate_click"]:hover,
.button[data-event="affiliate_click"]:focus-visible {
  background: #963d19;
  border-color: #963d19;
}
.button[data-event="affiliate_click"]:focus-visible {
  outline: 3px solid rgba(32, 39, 32, 0.5);
  outline-offset: 2px;
}
.button-quiet { background: transparent; border-color: var(--line); }
.text-link { color: var(--forest); }

.redesign-cover { background: #1d251d; }
.redesign-cover-link {
  display: block;
  position: relative;
  height: min(520px, calc(100svh - 170px));
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.redesign-cover-link::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 18, 12, 0.88), rgba(11, 18, 12, 0.04) 73%);
}
.redesign-cover-link > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transition: transform 400ms ease;
}
.redesign-cover-link:hover > img { transform: scale(1.015); }
.redesign-cover-copy {
  position: absolute;
  z-index: 1;
  left: max(1.25rem, calc((100vw - var(--content)) / 2));
  right: 1.25rem;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 780px;
}
.redesign-cover-meta { color: #e4e9dc; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; }
.redesign-cover-copy h1 { margin: 0; color: #fff; font-size: 2.65rem; line-height: 1.12; font-weight: 800; }
.redesign-cover-cta { padding-bottom: 0.18rem; border-bottom: 1px solid currentColor; font-size: 0.93rem; font-weight: 750; }
.redesign-cover-cta > span { margin-left: 0.45rem; }

.event-promo { background: var(--band); border-bottom: 1px solid var(--line); }
.event-promo-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: min(var(--content), calc(100% - 2.5rem)); margin: auto; padding: 1.25rem 0; }
.event-promo h2 { margin: 0.1rem 0 0.35rem; font-size: 1.45rem; line-height: 1.2; }
.event-promo p:last-child { max-width: 760px; margin: 0; color: var(--muted); font-size: 0.91rem; }
.event-promo .button { flex-shrink: 0; }
.event-promo-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem; }
.event-promo-actions .button { white-space: nowrap; padding-inline: 0.95rem; font-size: 0.82rem; }
.event-promo-actions .event-promo-featured { background: var(--rust); border-color: var(--rust); color: #fff; }
.event-promo-actions .event-promo-featured:hover { background: #963d19; border-color: #963d19; }
.event-promo .event-promo-disclosure { flex-basis: 100%; max-width: 520px; margin: 0.15rem 0 0; text-align: right; font-size: 0.72rem; line-height: 1.4; }
.event-promo p:last-child a { color: var(--ink); font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.redesign-reviews,
.redesign-reading { padding: 3.7rem max(1.25rem, calc((100vw - var(--content)) / 2)) 4.2rem; }
.redesign-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.redesign-section-heading h2 { font-size: 2.15rem; }
.section-link { white-space: nowrap; }

.review-grid-home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.review-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: none;
  transition: border-color 160ms ease, transform 160ms ease;
}
.review-card:hover { border-color: #9eac9d; transform: translateY(-2px); }
.review-card-image { aspect-ratio: 4 / 3; }
.review-card-image img { transition: transform 350ms ease; }
.review-card:hover .review-card-image img { transform: scale(1.025); }
.review-card-body { padding: 1.25rem 1.3rem 1.35rem; }
.review-card h3 { font-size: 1.14rem; line-height: 1.3; }
.review-card-body > p:not(.review-meta) { color: var(--muted); line-height: 1.5; }
.review-card-body > .text-link { font-size: 0.87rem; }
.review-grid-home .review-card-body > p:not(.review-meta) { display: none; }
.review-meta { color: var(--rust); font-size: 0.68rem; }

.featured-brands { background: #fff; border-block: 1px solid var(--line); }
.featured-brands-inner {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.65rem;
}
.featured-brands .eyebrow { color: var(--muted); }
.brand-logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 0.8rem 1.1rem; }
.brand-logo-card { min-height: 52px; }
.brand-logo-card:focus-visible { outline: none; }
.brand-logo-card:focus-visible .brand-logo-mark { box-shadow: 0 2px 0 var(--rust); }
.brand-logo-mark { height: 46px; }
.brand-logo-mark img { filter: grayscale(1); opacity: 0.77; transition: filter 160ms ease, opacity 160ms ease; }
.brand-logo-card:hover img, .brand-logo-card:focus-visible img { filter: none; opacity: 1; }
.brand-logo-card[data-brand="keychron"] .brand-logo-mark img { width: 132px; }
.brand-logo-card[data-brand="esr"] .brand-logo-mark img { width: 92px; }
.brand-logo-card[data-brand="nuphy"] .brand-logo-mark img { width: 108px; }
.brand-logo-card[data-brand="alpaka"] .brand-logo-mark img { width: 62px; }
.brand-logo-card[data-brand="kuxiu"] .brand-logo-mark img { width: 118px; }
.brand-logo-card[data-brand="pitaka"] .brand-logo-mark img { width: 120px; }

.redesign-reading { background: var(--paper); }
.topic-reading-block { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1rem; margin: 0 0 3.75rem; clear: both; }
.topic-reading-block:last-child { margin-bottom: 0; }
.topic-reading-block > h3 { margin: 0; line-height: 1.2; }
.topic-reading-content { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; gap: 1.25rem; min-width: 0; }
.topic-feature-link { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.topic-feature-link:hover { transform: translateY(-2px); border-color: #9eac9d; box-shadow: 0 12px 28px rgba(36, 43, 27, 0.08); }
.topic-feature-link > img { display: block; flex: 0 0 auto; width: 100%; height: clamp(13rem, 25vw, 20rem); min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; background: var(--band); }
.topic-feature-link > span { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1rem 1.15rem 1.1rem; }
.topic-feature-link small, .topic-guide-list small { color: var(--rust); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.topic-feature-link strong { font-size: 1.2rem; line-height: 1.3; }
.topic-feature-link em { color: var(--muted); font-size: 0.95rem; font-style: normal; }
.topic-guide-list { display: grid; align-content: start; gap: 0.75rem; min-width: 0; }
.topic-guide-list > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center; column-gap: 0.7rem; row-gap: 0.2rem; min-width: 0; min-height: 5.6rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); background-image: none; color: var(--ink); text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; }
.topic-guide-list > a:hover { border-color: #9eac9d; background: #fff; }
.topic-guide-list small { grid-column: 1 / -1; }
.topic-guide-list strong { min-width: 0; font-size: 1rem; line-height: 1.3; }
.topic-guide-list > a > span { color: var(--forest); font-size: 1.25rem; line-height: 1; }
.topic-feature-link:hover strong, .topic-guide-list > a:hover strong { text-decoration: underline; text-decoration-color: var(--rust); text-underline-offset: 4px; }
.redesign-section-heading .section-link::after { content: none; }
.redesign-reading-link { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.redesign-reading-link:hover { transform: translateY(-2px); border-color: #9eac9d; box-shadow: 0 12px 28px rgba(36, 43, 27, 0.08); }
.redesign-reading-link > img { display: block; width: 100%; aspect-ratio: 1.9 / 1; height: auto; object-fit: cover; background: var(--band); }
.redesign-reading-link > span { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.3rem 0.65rem; padding: 1rem 1.15rem 1.1rem; }
.redesign-reading-link small { flex: 0 0 100%; color: var(--rust); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.redesign-reading-link strong { flex: 1 1 0; min-width: 0; font-size: 1.18rem; line-height: 1.35; }
.redesign-reading-link > span > span { flex: 0 0 auto; color: var(--forest); font-size: 1.3rem; line-height: 1.2; }
.redesign-reading-link:hover strong { text-decoration: underline; text-decoration-color: var(--rust); text-underline-offset: 4px; }
.guide-section--two-column .guide-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.redesign-about { background: var(--band); border-block: 1px solid var(--line); }
.redesign-about-inner,
.redesign-contact-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  width: min(var(--content), calc(100% - 2.5rem));
  margin-inline: auto;
  padding-block: 4rem;
}
.redesign-about h2,
.redesign-contact h2 { max-width: 16ch; font-size: 2.4rem; }
.redesign-about p:not(.eyebrow),
.redesign-contact p:not(.eyebrow) { max-width: 550px; margin: 0 0 1.2rem; color: var(--muted); font-size: 1.05rem; }
.redesign-contact .contact-actions { margin: 0.4rem 0 1.2rem; }
.redesign-contact .text-link { display: inline-block; }

.site-footer { background: var(--forest); color: #e3e9df; border: 0; }
.site-footer span:first-child,
.site-footer a { color: #f2f4ef; }
.site-footer a { text-decoration-color: #e8a082; }

.page-intro { padding-top: 3.8rem; padding-bottom: 2.4rem; }
.page-intro h1 { max-width: 1000px; font-size: 3.55rem; line-height: 1.07; }
.page-intro > p:last-child { color: var(--muted); }
.review-archive { gap: 1rem; }
.review-archive .review-card-image { height: auto; aspect-ratio: 4 / 3; }
.review-archive .review-card-body > p:not(.review-meta) { display: none; }

.review-article { background: #fff; }
.article-header { padding-top: 3.6rem; }
.article-header h1 { max-width: 940px; font-size: 3.1rem; line-height: 1.08; }
.article-summary { color: var(--muted); }
.article-hero { width: min(1350px, 100%); border-radius: 0; box-shadow: none; }
.article-hero--natural { aspect-ratio: 3 / 2; }
.review-overview { margin-top: 3rem; margin-bottom: 0; padding-block: 2rem; }
.verdict-lead h2 { color: var(--forest); font-size: 1.55rem; line-height: 1.35; }
.article-layout { padding-top: 3rem; }
.article-body { color: var(--ink); }
.article-body h2 { color: var(--forest); }
.photo-section, .related-reviews { border-top: 1px solid var(--line); }
.related-reviews { display: block; }
.article-footer { background: var(--band); }
.related-reviews { margin-top: 3rem; }
.setup-card, .used-gear-links a { box-shadow: none; border-radius: 5px; }
.reading-link img, .comparison-photos img, .setup-hero img { border-radius: 4px; }

@media (max-width: 860px) {
  .site-header { gap: 0.35rem; }
  .featured-brands-inner { grid-template-columns: 1fr; gap: 0.6rem; }
  .brand-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-logo-card { flex-basis: 150px; }
  .redesign-about-inner, .redesign-contact-inner { gap: 1.6rem; }
}

@media (max-width: 720px) {
  .topic-reading-content { grid-template-columns: 1fr; gap: 0.75rem; }
  .topic-feature-link > img { height: clamp(11rem, 45vw, 15rem); aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 115px; }
  .site-header { position: sticky; display: grid; grid-template-columns: minmax(0, 1fr) 36px; grid-template-rows: 42px auto; align-items: center; min-height: 0; padding: 0.55rem 1.25rem 0.25rem; }
  .site-header .brand { min-height: 42px; width: calc(100% - 50px); font-size: 0.96rem; }
  .site-header .brand img { width: 34px; height: 34px; }
  .site-header nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.15rem 0.35rem; width: 100%; padding: 0.15rem 0 0; overflow: visible; white-space: normal; font-size: 0.79rem; }
  .site-header nav > a:not(.social-link) { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 36px; padding: 0.3rem 0.2rem; text-align: center; }
  .site-header .social-link { position: absolute; top: 0.65rem; right: 1.25rem; grid-column: 2; grid-row: 1; width: 34px; height: 34px; }
  .redesign-cover-link { height: min(420px, calc(100svh - 190px)); }
  .redesign-cover-link > img { object-position: 50% center; }
  .redesign-cover-copy { left: 1.25rem; right: 1.25rem; bottom: 1.3rem; gap: 0.35rem; }
  .redesign-cover-copy h1 { font-size: 1.6rem; line-height: 1.17; }
  .redesign-cover-meta { font-size: 0.67rem; }
  .redesign-cover-cta { font-size: 0.83rem; }
  .event-promo-inner { display: block; padding: 1.3rem 0; }
  .event-promo h2 { font-size: 1.35rem; }
  .event-promo-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1rem; }
  .event-promo-actions .button { display: inline-flex; justify-content: center; margin: 0; white-space: normal; text-align: center; }
  .event-promo .event-promo-disclosure { grid-column: 1 / -1; }
  .event-promo .event-promo-disclosure { max-width: none; text-align: left; }
  .redesign-reviews, .redesign-reading { padding: 2.6rem 1.25rem 3rem; }
  .redesign-section-heading { align-items: center; flex-wrap: wrap; gap: 0.4rem; }
  .redesign-section-heading .section-link { white-space: normal; }
  .redesign-section-heading h2 { font-size: 1.55rem; }
  .review-grid-home { grid-template-columns: 1fr; }
  .review-grid-home .review-card-image { aspect-ratio: 16 / 10; }
  .brand-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 0.7rem; }
  .brand-logo-card { flex-basis: 130px; min-height: 56px; }
  .brand-logo-card[data-brand="kuxiu"] { grid-column: auto; }
  .featured-brands-inner { padding-block: 1.35rem; }
  .topic-reading-content { grid-template-columns: 1fr; gap: 0.75rem; }
  .topic-guide-list > a { padding: 0.85rem 1rem; }
  .topic-reading-block { margin-bottom: 2.8rem; }
  .redesign-about-inner, .redesign-contact-inner { grid-template-columns: 1fr; gap: 1rem; padding-block: 3rem; }
  .redesign-about h2, .redesign-contact h2 { font-size: 2rem; }
  .redesign-contact .contact-actions { display: flex; flex-direction: row; }
  .redesign-contact .button { width: auto; }
  .page-intro { padding-top: 2.75rem; padding-bottom: 2rem; }
  .page-intro h1, .article-header h1 { font-size: 2rem; }
  .article-header { padding-top: 2.75rem; }
  .article-hero { width: 100%; }
  .review-overview { margin-top: 2rem; }
  .review-archive .review-card-image { aspect-ratio: 16 / 10; }
}

@media (max-width: 340px) {
  .redesign-section-heading h2 { font-size: 1.4rem; }
  .brand-logo-card { flex-basis: 118px; }
  .site-header nav { column-gap: 0.2rem; font-size: 0.74rem; }
  .site-header nav .storefront-nav-link { white-space: normal; line-height: 1.15; }
  .redesign-contact .contact-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .redesign-cover-link > img,
  .review-card,
  .brand-logo-mark img { transition: none; }
}

/* Keep long guide titles and lead images inside narrower laptop/tablet viewports,
   including browser windows made narrow by display scaling or zoom. */
@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; min-width: 0; }
  .site-header nav {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
.site-header nav > a:not(.social-link) { max-width: 100%; white-space: normal; }
  .comparison-page { min-width: 0; max-width: 100%; }
  .comparison-page .page-intro { width: min(calc(100% - 2rem), 68rem); }
  .comparison-page .page-intro h1 {
    max-width: 22ch;
    font-size: clamp(2rem, 5.25vw, 3.1rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }
  .comparison-page .comparison-photos { width: min(calc(100% - 2rem), 50rem); }
  .comparison-page .comparison-photos figure { min-width: 0; }
  .comparison-page .comparison-photos img { display: block; max-width: 100%; height: auto; }
}

/* The storefront pill must wrap into the mobile navigation grid instead of
   extending beyond the viewport. */
@media (max-width: 560px) {
  .site-header nav .storefront-nav-link {
    max-width: 100%;
    padding: 0.3rem 0.25rem;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
  }
}