/* =========================================================================
   BEST LISTS — v4.1

   Two pages, both modelled on Wirecutter.

   /best/          the home page. Three columns: a dateline rail on the
                   left, one lead list in the middle with the picture and
                   the dek, a live price rail on the right. Everything else
                   below in a plain grid.

   /best/<slug>/   the review page. Kicker, heavy rule, headline, updated
                   line, share row, full-bleed hero with a credit, byline,
                   dek. Then the picks and the entries.

   What is NOT borrowed is the 700px column. The page runs edge to edge in
   the site gutters; only the reading prose is measured. Type, colour and
   shape are the v5 tokens throughout: Bricolage, black on porcelain,
   cobalt only for a verdict, a pick, or an action.
   ========================================================================= */

.atn-wc,
.atn-bestfront {
  --wc-pad: var(--gutter);
  --wc-rule: 1px solid var(--line);
  --wc-heavy: 4px solid var(--ink);
}

.atn-wc { padding-bottom: clamp(3rem, 6vw, 6rem); }

/* Full width, gutters only. */
.atn-wc__head,
.atn-wc__hero,
.atn-wc__verdictinner,
.atn-wc__pickshead,
.atn-wc__pickrail,
.atn-wc__methodinner,
.atn-wc__entrygrid,
.atn-wc__essaygrid,
.atn-wc__longforminner,
.atn-wc__faqsinner,
.atn-wc__nextinner,
.atn-bestfront__masthead,
.atn-bestfront__grid,
.atn-bestfront__all {
  width: 100%;
  max-width: none;
  padding-left: var(--wc-pad);
  padding-right: var(--wc-pad);
}

/* Prose still gets a measure. Width is for pictures, not line length. */
.atn-wc__dek,
.atn-wc__verdicttext p,
.atn-wc__methodinner p,
.atn-wc__why p,
.atn-wc__essaycol p { max-width: 68ch; }

.atn-wc__kicker {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-45);
}
.atn-wc__kicker .atn-i { color: var(--cobalt); }

/* =================================================== REVIEW MASTHEAD ==== */

.atn-wc__masthead {
  background: var(--white);
  border-bottom: var(--wc-rule);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.atn-wc__head { max-width: 72rem; }
.atn-wc__crumb { margin-bottom: 1.75rem; }

/* The section label and the heavy rule under it. This pair is the single
   most recognisable thing about a Wirecutter review page. */
.atn-wc__kickerlabel {
  margin: 0 0 .75rem;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-70);
}
.atn-wc__kickerlabel::after {
  content: ""; display: block;
  margin-top: .75rem;
  border-top: var(--wc-heavy);
}

.atn-wc__title {
  margin: 0;
  font-size: clamp(2.375rem, 4.6vw, 4.25rem);
  font-weight: 700; line-height: 1.02;
  letter-spacing: -.03em;
  font-variation-settings: "wdth" 82, "opsz" 96;
  text-wrap: balance;
  max-width: 22ch;
}

.atn-wc__updated {
  margin: 1.25rem 0 0;
  font-size: .9375rem; color: var(--ink-70);
  font-variant-numeric: tabular-nums;
}

.atn-wc__share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 1.125rem 0 0;
}
.atn-wc__sharebtn {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 2.375rem; padding: 0 .75rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.atn-wc__sharebtn:hover { background: var(--cobalt-t); border-color: var(--cobalt); color: var(--cobalt); }
.atn-wc__sharebtn .atn-i { width: 1rem; height: 1rem; }
.atn-wc__sharebtn.is-copied { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.atn-wc__sharecount { margin-left: .5rem; font-size: .8125rem; color: var(--ink-45); }

/* Full-bleed hero, the way a review opens on a photograph. */
.atn-wc__hero { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.atn-wc__hero img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: var(--r-box);
}
.atn-wc__hero figcaption {
  margin-top: .625rem;
  font-size: .8125rem; color: var(--ink-45);
  text-align: right;
}

.atn-wc__head--after { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

.atn-wc__byline { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; color: var(--ink-70); }
.atn-wc__avatar {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--ink); color: var(--white);
  font-size: .625rem; font-weight: 700; letter-spacing: .04em;
}
.atn-wc__byline strong { color: var(--ink); font-weight: 600; }

.atn-wc__dek {
  margin: 1.125rem 0 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  line-height: 1.5; color: var(--ink-70);
  font-variation-settings: "wdth" 96, "opsz" 18;
}

.atn-wc__angle {
  display: inline-block; margin: 1.125rem 0 0;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cobalt); background: var(--cobalt-t);
  padding: .35rem .75rem; border-radius: var(--r-pill);
}

/* ======================================================== THE ANSWER ==== */

.atn-wc__verdict { background: var(--ink); color: var(--white); padding: clamp(2rem, 4vw, 3.25rem) 0; }
.atn-wc__verdict .atn-wc__kicker { color: rgba(255,255,255,.55); }
.atn-wc__verdict .atn-wc__kicker .atn-i { color: var(--white); }
.atn-wc__verdicttext p {
  margin: 0 0 1rem;
  font-size: clamp(1.1875rem, 2vw, 1.75rem);
  line-height: 1.32; letter-spacing: -.02em;
  font-variation-settings: "wdth" 90, "opsz" 32;
}
.atn-wc__verdicttext p:last-child { margin-bottom: 0; }

/* ========================================================= PICKS RAIL === */

.atn-wc__picks { padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(1.25rem, 2.5vw, 2rem); }

.atn-wc__pickshead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  margin-bottom: 1.25rem;
}
.atn-wc__pickshead .atn-wc__kicker { margin-bottom: 0; }
.atn-wc__pickshead p { margin: 0; font-size: .875rem; color: var(--ink-45); }

/* Deliberately small. These are a control strip, not the content. */
.atn-wc__pickrail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(12.5rem, 1fr);
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.atn-wc__pickrail::-webkit-scrollbar { display: none; }

.atn-wc__pick {
  position: relative;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  padding: .5rem .5rem .75rem;
  isolation: isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  animation: atn-wc-rise .45s var(--ease) both;
  animation-delay: calc(var(--i, 1) * 40ms);
}

@keyframes atn-wc-rise {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.atn-wc__pickjump { position: absolute; inset: 0; z-index: 2; border-radius: var(--r-box); }

.atn-wc__pick:hover,
.atn-wc__pick:focus-within {
  transform: translateY(-5px);
  border-color: rgba(32,56,255,.35);
  box-shadow: 0 14px 32px -20px rgba(0,0,0,.45);
}
.atn-wc__pick:active { transform: translateY(-1px) scale(.99); transition-duration: .1s; }

.atn-wc__pickshot { position: relative; border-radius: 4px; overflow: hidden; background: var(--paper); }
.atn-wc__pickshot img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .55s var(--ease);
}
.atn-wc__pick:hover .atn-wc__pickshot img { transform: scale(1.06); }

.atn-wc__pickrank {
  position: absolute; left: .375rem; bottom: .375rem;
  display: grid; place-items: center;
  min-width: 1.625rem; height: 1.625rem; padding: 0 .35rem;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--white);
  font-size: .8125rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.atn-wc__pick:first-child .atn-wc__pickrank { background: var(--cobalt); }

.atn-wc__award {
  margin: .625rem 0 .25rem;
  font-size: .625rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cobalt);
}

.atn-wc__pickname {
  margin: 0;
  font-size: .9375rem; font-weight: 600; line-height: 1.15;
  letter-spacing: -.01em;
  font-variation-settings: "wdth" 92, "opsz" 24;
}
.atn-wc__pickfor {
  margin: .25rem 0 0;
  font-size: .8125rem; line-height: 1.35; color: var(--ink-70);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.atn-wc__pickprice {
  margin: .5rem 0 0;
  font-size: .8125rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.atn-wc__pickcta { margin-top: .5rem; }
.atn-wc__pickcta a {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 600; color: var(--cobalt);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.atn-wc__pickcta a:hover { border-bottom-color: var(--cobalt); }

.atn-wc__pick.is-current { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
.atn-wc__pick.is-current .atn-wc__pickrank { background: var(--cobalt); }

.atn-wc__entry.is-landed { animation: atn-wc-land 1.1s var(--ease); }
@keyframes atn-wc-land {
  0%   { background: var(--cobalt-t); }
  100% { background: transparent; }
}

/* ============================================================ METHOD ==== */

.atn-wc__method { padding: clamp(1.25rem, 2.5vw, 2rem) 0; border-top: var(--wc-rule); }
.atn-wc__methodinner p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-70); }

/* =========================================================== ENTRIES ==== */

.atn-wc__entries { border-top: var(--wc-rule); }

.atn-wc__entry {
  border-bottom: var(--wc-rule);
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  scroll-margin-top: 6rem;
}
.atn-wc__entry--lead { background: var(--white); }

.atn-wc__entrygrid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
}
.atn-wc__entry--lead .atn-wc__entrygrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.atn-wc__entryshot { position: relative; margin: 0; }
.atn-wc__entryshot img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-box); border: 1px solid var(--line);
}
.atn-wc__entryrank {
  position: absolute; top: -.75rem; left: -.5rem;
  font-size: clamp(2.75rem, 5vw, 4.75rem);
  font-weight: 700; line-height: .8; letter-spacing: -.05em;
  font-variation-settings: "wdth" 75, "opsz" 96;
  color: var(--white);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  pointer-events: none;
}
.atn-wc__entry--lead .atn-wc__entryrank { -webkit-text-stroke-color: var(--cobalt); }

.atn-wc__award--big { margin: 0 0 .75rem; font-size: .75rem; }

.atn-wc__entryhead { display: flex; gap: 1rem; align-items: center; }
.atn-wc__entrynames { min-width: 0; }

.atn-wc__logo {
  flex: none; width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--r-logo);
  background: var(--paper); border: 1px solid var(--line);
  overflow: hidden;
}
.atn-wc__logo--lg { width: 3.5rem; height: 3.5rem; }
.atn-wc__logo img { width: 100%; height: 100%; object-fit: contain; padding: .375rem; }
.atn-wc__logo span { font-size: 1.125rem; font-weight: 700; }

.atn-wc__entryname {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -.025em;
  font-variation-settings: "wdth" 85, "opsz" 48;
}
.atn-wc__entryname a {
  background-image: linear-gradient(var(--cobalt), var(--cobalt));
  background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s var(--ease);
}
.atn-wc__entryname a:hover { background-size: 100% 2px; }

.atn-wc__entrytag { margin: .375rem 0 0; font-size: .9375rem; color: var(--ink-45); }

.atn-wc__pricerow { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 0; }
.atn-wc__price {
  margin: 0; font-size: 1.3125rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.atn-wc__flag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 600;
  padding: .3rem .6rem; border-radius: var(--r-pill);
  background: var(--cobalt-t); color: var(--cobalt);
}

.atn-wc__why { margin: 1rem 0 0; }
.atn-wc__why p { margin: 0 0 .875rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-70); }
.atn-wc__why p:last-child { margin-bottom: 0; }

.atn-wc__fit {
  margin: 1.125rem 0 0;
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-box);
  overflow: hidden;
}
.atn-wc__fitrow {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem; padding: .7rem 1rem;
  background: var(--paper);
}
.atn-wc__entry--lead .atn-wc__fitrow { background: var(--white); }
.atn-wc__fitrow dt {
  display: flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-45);
}
.atn-wc__fitrow dd { margin: 0; font-size: .9375rem; line-height: 1.45; }
.atn-wc__fitrow--yes dt .atn-i { color: var(--cobalt); }
.atn-wc__fitrow--no  dt .atn-i { color: var(--ink-45); }

.atn-wc__split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin: 1.125rem 0 0; }
.atn-wc__pros, .atn-wc__cons { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.atn-wc__pros li, .atn-wc__cons li { display: flex; gap: .5rem; font-size: .9375rem; line-height: 1.4; }
.atn-wc__pros .atn-i { color: var(--cobalt); flex: none; margin-top: .2em; }
.atn-wc__cons .atn-i { color: var(--ink-45); flex: none; margin-top: .2em; }

.atn-wc__actions { display: flex; flex-wrap: wrap; gap: .625rem; margin: 1.375rem 0 0; }

/* ======================================================= ESSAY / FAQ ==== */

.atn-wc__essay { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; background: var(--white); border-bottom: var(--wc-rule); }
.atn-wc__essaygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: clamp(1.75rem, 4vw, 4rem); }
.atn-wc__essaycol p { margin: 0 0 .875rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-70); }

.atn-wc__longform { padding: clamp(2rem, 4vw, 3rem) 0; }
.atn-wc__longforminner { font-size: 1.0625rem; line-height: 1.65; }
.atn-wc__longforminner > * { max-width: 68ch; }

.atn-wc__faqs { padding: clamp(2rem, 4vw, 3.25rem) 0; border-top: var(--wc-rule); }
.atn-wc__faqsh {
  margin: 0 0 1.25rem;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 600;
  letter-spacing: -.025em; line-height: 1;
  font-variation-settings: "wdth" 85, "opsz" 48;
}
.atn-wc__faq { border-bottom: 1px solid var(--line); max-width: 72ch; }
.atn-wc__faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
}
.atn-wc__faq summary::-webkit-details-marker { display: none; }
.atn-wc__faq summary .atn-i { flex: none; transition: transform .25s var(--ease); color: var(--ink-45); }
.atn-wc__faq[open] summary .atn-i { transform: rotate(180deg); }
.atn-wc__faq > div { padding: 0 0 1.125rem; color: var(--ink-70); }
.atn-wc__faq > div p { margin: 0 0 .75rem; line-height: 1.6; }

.atn-wc__next { padding: clamp(2rem, 4vw, 3rem) 0 0; }
.atn-wc__note { margin: 0 0 1.25rem; font-size: .875rem; color: var(--ink-45); max-width: 60ch; }

/* ======================================================== /best/ HOME === */

.atn-bestfront { padding-bottom: clamp(3rem, 6vw, 5rem); }

.atn-bestfront__masthead { padding-top: clamp(2rem, 4vw, 3.25rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.atn-bestfront__wordmark {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700; line-height: .95; letter-spacing: -.035em;
  font-variation-settings: "wdth" 76, "opsz" 96;
}
.atn-bestfront__standfirst { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-70); max-width: 52ch; }
.atn-bestfront__count { margin: .75rem 0 0; font-size: .875rem; color: var(--ink-45); font-variant-numeric: tabular-nums; }

/* The three columns. Rails are fixed and narrow, the lead takes the rest. */
.atn-bestfront__grid {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr) 19rem;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: var(--wc-heavy);
}

.atn-bestfront__railhead {
  margin: 0 0 1rem;
  padding-bottom: .625rem;
  border-bottom: 2px solid var(--ink);
  font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em;
  font-variation-settings: "wdth" 88, "opsz" 32;
}

.atn-bestfront__raillist { list-style: none; margin: 0; padding: 0; }
.atn-bestfront__raillist li { padding: .875rem 0; border-bottom: 1px solid var(--line-soft); }
.atn-bestfront__raillist li:last-child { border-bottom: 0; }
.atn-bestfront__raillist a {
  display: block;
  font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: -.012em;
  font-variation-settings: "wdth" 94, "opsz" 18;
  transition: color .2s var(--ease);
}
.atn-bestfront__raillist a:hover { color: var(--cobalt); }
.atn-bestfront__raillist span { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--ink-45); }
.atn-bestfront__railempty { margin: 0; font-size: .9375rem; color: var(--ink-45); }

.atn-bestfront__seeall {
  display: inline-block; margin-top: 1.25rem;
  font-size: .9375rem; font-weight: 600;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .1rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.atn-bestfront__seeall:hover { color: var(--cobalt); border-color: var(--cobalt); }

/* The lead. */
.atn-bestfront__leadshot { display: block; border-radius: var(--r-box); overflow: hidden; background: var(--paper); }
.atn-bestfront__leadshot img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .7s var(--ease);
}
.atn-bestfront__lead:hover .atn-bestfront__leadshot img { transform: scale(1.03); }

.atn-bestfront__leadkicker {
  margin: 1.25rem 0 .5rem;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cobalt);
}
.atn-bestfront__leadtitle {
  margin: 0;
  padding-top: .875rem;
  border-top: var(--wc-heavy);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.03em;
  font-variation-settings: "wdth" 80, "opsz" 96;
  text-wrap: balance;
}
.atn-bestfront__leadby { margin: .875rem 0 0; font-size: .9375rem; font-weight: 600; }
.atn-bestfront__leaddek { margin: .875rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-70); max-width: 58ch; }

.atn-bestfront__leadtop { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .5rem; max-width: 34rem; }
.atn-bestfront__leadtop li {
  display: grid; grid-template-columns: 1.5rem minmax(0,1fr) auto;
  align-items: center; gap: .75rem;
  padding: .5rem 0; border-top: 1px solid var(--line-soft);
  font-size: .9375rem;
}
.atn-bestfront__leadtop li span {
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--ink); color: var(--white);
  font-size: .6875rem; font-weight: 700;
}
.atn-bestfront__leadtop li:first-child span { background: var(--cobalt); }
.atn-bestfront__leadtop a { font-weight: 600; }
.atn-bestfront__leadtop a:hover { color: var(--cobalt); }
.atn-bestfront__leadtop em { font-style: normal; font-size: .8125rem; color: var(--ink-45); font-variant-numeric: tabular-nums; }

/* The price rail. */
.atn-bestfront__dealsnote { margin: 0 0 1rem; font-size: .875rem; color: var(--ink-45); }
.atn-bestfront__deallist { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.atn-bestfront__deal {
  display: grid; grid-template-columns: 3.25rem minmax(0,1fr);
  gap: .875rem; align-items: center;
  padding-bottom: .875rem; border-bottom: 1px solid var(--line-soft);
}
.atn-bestfront__deal:last-child { border-bottom: 0; padding-bottom: 0; }
.atn-bestfront__dealshot {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--r-logo);
  background: var(--paper); border: 1px solid var(--line);
  overflow: hidden;
}
.atn-bestfront__dealshot img { width: 100%; height: 100%; object-fit: contain; padding: .3rem; }
.atn-bestfront__dealshot span { font-size: 1.125rem; font-weight: 700; }
.atn-bestfront__dealname { font-size: .9375rem; font-weight: 600; line-height: 1.2; }
.atn-bestfront__dealname:hover { color: var(--cobalt); }
.atn-bestfront__dealprice { margin: .25rem 0 0; font-size: .875rem; font-weight: 700; color: var(--cobalt); font-variant-numeric: tabular-nums; }

/* Everything else. */
.atn-bestfront__all { padding-top: clamp(2.5rem, 5vw, 4rem); }
.atn-bestfront__allhead {
  margin: 0;
  padding-bottom: .75rem; border-bottom: var(--wc-heavy);
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600;
  letter-spacing: -.025em;
  font-variation-settings: "wdth" 85, "opsz" 48;
}

.atn-bestindex {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: clamp(.875rem, 1.6vw, 1.375rem);
  padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(2rem, 4vw, 3rem);
}

.atn-bestcard {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  overflow: hidden;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
  animation: atn-wc-rise .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.atn-bestcard:hover,
.atn-bestcard:focus-within {
  transform: translateY(-6px);
  border-color: rgba(32,56,255,.35);
  box-shadow: 0 20px 42px -26px rgba(0,0,0,.5);
}
.atn-bestcard:active { transform: translateY(-2px) scale(.992); transition-duration: .1s; }

.atn-bestcard__shot { position: relative; display: block; background: var(--paper); }
.atn-bestcard__shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .65s var(--ease); }
.atn-bestcard:hover .atn-bestcard__shot img { transform: scale(1.06); }

.atn-bestcard__count {
  position: absolute; top: .5rem; left: .5rem;
  display: grid; place-items: center;
  min-width: 1.875rem; height: 1.875rem; padding: 0 .4rem;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--white);
  font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.atn-bestcard__type {
  position: absolute; right: .5rem; bottom: .5rem;
  font-size: .625rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: var(--r-pill);
  background: var(--white); color: var(--cobalt);
  box-shadow: 0 2px 10px -4px rgba(0,0,0,.4);
}

.atn-bestcard__body { padding: .875rem .875rem 1rem; display: flex; flex-direction: column; flex: 1; }
.atn-bestcard__eyebrow { margin: 0 0 .4rem; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-45); }
.atn-bestcard__title {
  margin: 0;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.18; letter-spacing: -.018em;
  font-variation-settings: "wdth" 90, "opsz" 24;
}
.atn-bestcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.atn-bestcard__top { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .3rem; }
.atn-bestcard__top li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8125rem; color: var(--ink-70);
  opacity: 0; transform: translateY(5px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  transition-delay: calc(var(--j, 0) * 40ms);
}
.atn-bestcard:hover .atn-bestcard__top li,
.atn-bestcard:focus-within .atn-bestcard__top li { opacity: 1; transform: none; }
.atn-bestcard__top li span {
  display: grid; place-items: center; flex: none;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  font-size: .625rem; font-weight: 700;
}
@media (hover: none) { .atn-bestcard__top li { opacity: 1; transform: none; } }

/* ========================================================== NARROWER ==== */

@media (max-width: 1200px) {
  .atn-bestfront__grid { grid-template-columns: 15rem minmax(0, 1fr); }
  .atn-bestfront__deals { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.5rem; }
  .atn-bestfront__deallist { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); display: grid; }
  .atn-bestfront__deal { border-bottom: 0; }
}

@media (max-width: 1100px) {
  .atn-wc__entrygrid,
  .atn-wc__entry--lead .atn-wc__entrygrid { grid-template-columns: 1fr; }
  .atn-wc__entryrank { left: .5rem; top: .5rem; }
}

@media (max-width: 860px) {
  .atn-bestfront__grid { grid-template-columns: 1fr; }
  .atn-bestfront__latest { order: 2; border-top: 1px solid var(--line); padding-top: 1.5rem; }
  .atn-bestfront__lead { order: 1; }
  .atn-bestfront__deals { order: 3; }
  .atn-wc__hero img { aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
  .atn-wc__pickrail { grid-auto-columns: minmax(11.5rem, 64%); }
  .atn-wc__split { grid-template-columns: 1fr; }
  .atn-wc__fitrow { grid-template-columns: 1fr; gap: .25rem; }
  .atn-wc__actions .atn-btn { width: 100%; justify-content: center; }
  .atn-wc__sharelabel { display: none; }
  .atn-bestindex { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .atn-wc__pick,
  .atn-bestcard,
  .atn-wc__pickshot img,
  .atn-bestcard__shot img,
  .atn-bestfront__leadshot img,
  .atn-bestcard__top li { animation: none !important; transition: none !important; transform: none !important; }
  .atn-bestcard__top li { opacity: 1; }
  .atn-wc__entry.is-landed { animation: none; }
}