/* owners say. — ledger paper, green-cast ink, stance colors that carry data.
   Display: Bricolage Grotesque · Body: Public Sans · Data: Spline Sans Mono */

:root {
  --paper: #F5F6F2;
  --paper-raised: #FDFDFB;
  --ink: #182420;
  --ink-soft: #4A5A52;
  --line: #D8DCD4;
  --green: #1F7A48;
  --green-tint: #E4EFE7;
  --rust: #AE4526;
  --rust-tint: #F4E6E0;
  --amber: #C08A1E;
  --gray: #93A099;
  --highlight: #F1E97A;
  --display: "Bricolage Grotesque", sans-serif;
  --body: "Public Sans", sans-serif;
  --mono: "Spline Sans Mono", monospace;
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }

main { max-width: 66rem; margin: 0 auto; padding: 0 1.25rem; }

.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}

/* ---- header / ledger strip ---- */

header {
  display: grid;
  grid-template-columns: 1fr minmax(14rem, 26rem) 1fr;
  gap: 0.6rem 1.5rem;
  align-items: center;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
header .wordmark { grid-column: 1; justify-self: start; }
header .search-wrap { grid-column: 2; }
header .ledger { grid-column: 3; justify-self: end; text-align: right; }

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wm-ai { color: var(--green); }

.ledger { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.ledger a { text-decoration: none; }
.ledger a:hover .verified { text-decoration: underline; }

.verified { color: var(--green); font-weight: 500; }

/* ---- hero ---- */

.hero { padding: 3.2rem 0 2.4rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.9rem;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 20ch;
}

.hero-sub {
  margin-top: 1.1rem;
  max-width: 56ch;
  font-size: 1.06rem;
  color: var(--ink-soft);
}
.hero-sub strong { color: var(--ink); }
.hero-sub a { color: var(--green); }

.hero .hero-quote-lg {
  margin-top: 1.3rem;
  max-width: 62ch;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.55;
}

/* ---- badges ---- */

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  background: var(--green-tint);
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  white-space: nowrap;
}
.badge.sm { font-size: 0.6rem; padding: 0.12rem 0.4rem; }

/* ---- table of contents ---- */

.toc {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}
.toc li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.toc a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0;
  text-decoration: none;
  font-weight: 600;
}
.toc-thumb {
  width: 5.5rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.toc-tile {
  display: grid;
  place-items: center;
  background: var(--paper-raised);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--line);
}
.toc a:hover .toc-thumb { border-color: var(--green); }
.toc a:hover .toc-name { color: var(--green); }
.toc-no {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink-soft);
  min-width: 1.2rem;
}
.toc-n {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---- product sections ---- */

.product { padding: 3rem 0; border-top: 1px solid var(--line); }

.rank-line {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 1.4rem;
}

.rank-no {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 4.2rem);
  line-height: 0.85;
  color: var(--green);
  letter-spacing: -0.04em;
}

.rank-title .badge { margin-bottom: 0.35rem; }

.product h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.variant {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}

.product-body {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: 2.4rem;
  align-items: start;
}

/* media column */

.picture-wrap { border: 1px solid var(--line); overflow: hidden; }
.picture {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.img-wrap.under-picture { margin-top: 0.7rem; }

.img-wrap {
  display: block;
  position: relative;
  text-decoration: none;
  border: 1px solid var(--line);
  overflow: hidden;
}
.img-wrap img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.img-cap {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-soft);
  background: var(--paper-raised);
  padding: 0.45rem 0.6rem;
  border-top: 1px solid var(--line);
}
.img-wrap:hover .img-cap { color: var(--green); }

.img-tile {
  aspect-ratio: 16 / 9;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.img-tile span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 4rem;
  color: var(--line);
}

.buy {
  display: block;
  margin-top: 0.9rem;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.buy:hover { background: var(--green); }
.buy-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 0.35rem;
}


.specs {
  margin-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.spec {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}
.spec dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding-top: 0.15rem;
}
.spec dd { font-size: 0.84rem; margin: 0; }

/* copy column */

.why { margin-bottom: 0.8rem; }
.summary { color: var(--ink-soft); margin-bottom: 1.3rem; }

.proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}
.proscons h3 {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}
.pros h3 { color: var(--green); }
.cons h3 { color: var(--rust); }
.proscons ul { list-style: none; padding: 0; }
.proscons li {
  font-size: 0.89rem;
  padding-left: 1.15rem;
  position: relative;
  margin-bottom: 0.55rem;
}
.pros li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--green);
}
.cons li::before {
  content: "−";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-weight: 500;
  color: var(--rust);
}

.hero-quote {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
  max-width: 58ch;
}
.hero-quote mark {
  background: linear-gradient(104deg, transparent 0.4ch, var(--highlight) 0.4ch, var(--highlight) calc(100% - 0.3ch), transparent calc(100% - 0.3ch));
  padding: 0.1em 0.45ch;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: inherit;
}
.hero-attr {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* the signature: evidence bar */

.evidence-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 0.45rem;
}
.evidence-bar .seg {
  flex: 1;
  min-width: 3px;
  height: 14px;
  box-sizing: content-box;
  background-clip: content-box;   /* padding enlarges the tap target, not the mark */
  padding: 6px 0;
}
.evidence-bar a.seg { transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.evidence-bar a.seg:hover { transform: scaleY(1.3); }
.seg.positive { background-color: var(--green); }
.seg.mixed { background-color: var(--amber); }
.seg.neutral { background-color: var(--gray); }
.seg.negative { background-color: var(--rust); }

.stance-line {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}

/* source list */

.sources summary {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.sources summary:hover { color: var(--green); }

.sources ul { list-style: none; padding: 0; }

.source {
  padding: 0.9rem 0 0.9rem 1rem;
  border-left: 2px solid var(--line);
  margin: 0.7rem 0;
}
.source.positive { border-left-color: var(--green); }
.source.negative { border-left-color: var(--rust); }
.source.mixed { border-left-color: var(--amber); }

.source blockquote { font-size: 0.92rem; max-width: 68ch; }

.source-meta {
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.source-meta a { color: var(--green); }


/* #F1E97A below = var(--highlight) with alpha; update together on palette change */
.source:target { background: #F1E97A33; }  /* no-JS fallback */
.source.flash { animation: flash 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes flash {
  0%, 45% { background: #F1E97A55; }
  100% { background: transparent; }
}

/* ---- methodology ---- */

.method-block {
  padding: 2.2rem 0;
  border-top: 1px solid var(--line);
}
.method-block p {
  max-width: 72ch;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.verify-note { border-left: 2px solid var(--green); padding-left: 0.9rem; }

/* ---- breadcrumbs ---- */

.crumbs {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  padding-top: 1.4rem;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--green); }
.crumbs span { color: var(--ink); }

/* ---- search ---- */

.search-wrap {
  position: relative;
  width: 100%;
}
#search {
  width: 100%;
  padding: 0.5rem 0.9rem;
  font-family: var(--body);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 0;
}
#search:focus { outline: 2px solid var(--green); outline-offset: -1px; }
#search-results {
  position: absolute;
  z-index: 10;
  left: 0; right: 0;
  list-style: none;
  padding: 0;
  margin-top: 2px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px #18242018;
}
#search-results li a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
#search-results li:last-child a { border-bottom: none; }
#search-results li a:hover, #search-results li a:focus { background: var(--green-tint); }
#search-results .none {
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---- landing: category tiles ---- */

.home-hero { padding-bottom: 2rem; }

/* ---- highlights marquee ---- */
/* Strip of every ranking's winner. The tiles are rendered twice
   and the track slides one copy's width, then starts over, which the eye
   cannot see (each tile carries its own gap so both copies measure the
   same). --n is the tile count, so the speed stays put as rankings are added. */

.highlights {
  margin: 0.4rem 0 3.2rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.highlights-track {
  display: flex;
  width: max-content;
  animation: marquee calc(var(--n) * 4s) linear infinite;
}
.highlights:hover .highlights-track { animation-play-state: paused; }
.highlight {
  flex: 0 0 15rem;
  margin-right: 1.25rem;
  text-decoration: none;
}
.highlight img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--line);
}
.highlight:hover img { border-color: var(--green); }
.highlight span {
  display: block;
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}
.highlight:hover span { color: var(--green); }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---- index cards ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.25rem;
  padding-bottom: 4rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  text-decoration: none;
  overflow: hidden;
}
.card:hover { border-color: var(--green); }
.card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--line); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
/* Titles wrap to different line counts; the bar and stance line sit at the
   bottom so cards in a row line up regardless. */
.card-body { padding: 1.2rem 1.4rem 0.9rem; display: flex; flex-direction: column; flex: 1; }
.card .evidence-bar { margin-top: auto; }
.card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}
.card-body > p {
  margin: 0.4rem 0 1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.card .evidence-bar .seg { height: 10px; padding: 0; }
.card .stance-line { margin: 0.45rem 0 0; }
/* two stances per row: the first on the left edge, the second on the right */
.card-stances { display: grid; grid-template-columns: 1fr 1fr; row-gap: 0.2rem; }
.card-stances span:nth-child(even) { text-align: right; }

/* ---- shorts ---- */

.shorts { padding-bottom: 4rem; }
.shorts-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}
.short {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  background: var(--ink);
}

/* ---- faq ---- */

.faq { padding-bottom: 1rem; }
.product + .faq { padding-top: 2.2rem; }   /* on a ranking page it follows the last product */
.faq + .method-block { border-top: 0; }    /* the FAQ already ends with a rule */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 0.95rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-weight: 400; font-size: 1.3rem; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1rem; color: var(--ink-soft); }

/* ---- footer ---- */

footer {
  margin: 4rem auto 0;
  border-top: 1px solid var(--line);
  padding: 1.5rem 1.25rem 2.5rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  max-width: 66rem;
}
.foot-legal { margin-bottom: 1.6rem; }
.foot-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2rem;
}
.foot-nav { display: flex; gap: 1rem; margin-top: 0.7rem; font-family: var(--mono); font-size: 0.72rem; }
.foot-nav a { color: var(--green); }
.foot-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; }
.foot-shorts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
}
.foot-shorts:hover { color: var(--green); }
.foot-mission { font-size: 0.9rem; text-align: right; }

/* ---- about page ---- */

.prose .hero { padding-bottom: 1.2rem; }
.prose > .section-title { margin: 1.8rem 0 0.5rem; font-size: 1.25rem; }
.prose > p { max-width: 68ch; color: var(--ink-soft); }

/* ---- responsive & prefs ---- */

@media (max-width: 860px) {
}

@media (max-width: 700px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-right { align-items: flex-start; }
  .foot-mission { text-align: left; }
  .product-body { grid-template-columns: 1fr; gap: 1.5rem; }
  .proscons { grid-template-columns: 1fr; }
  .toc-n { display: none; }  /* counts repeat in each product's stance line */
  header { grid-template-columns: auto 1fr; }
  header .wordmark { grid-column: 1; grid-row: 1; }
  header .ledger { grid-column: 2; grid-row: 1; }
  header .search-wrap { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 480px) {
  .toc a { flex-wrap: wrap; }
  .toc a .badge { flex-basis: 100%; margin-top: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .highlights-track { animation: none; }
  .highlights { overflow-x: auto; }
  .evidence-bar a.seg { transition: none; }
  .source.flash { animation: none; }
}

/* Inline citation marker: quoted prose links to its original source */
.cite {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.1em;
  text-decoration: none;
  color: var(--green);
  font-weight: 600;
}
.cite:hover { text-decoration: underline; }