/* =============================================================================
   Diffco Reviews — stylesheet
   Signature: a "provenance / ledger" system. Reviews and ratings read like
   verifiable records; the lime accent is reserved for verification & liveness.
   Type: Space Grotesk (display) · Space Mono (metadata) · Inter Tight (body).
   ========================================================================== */

:root {
  /* palette (from brief) */
  --paper: #f5f4ef;
  --paper-2: #efeee7; /* slightly deeper warm for cards / wells */
  --graphite: #131214;
  --graphite-soft: #1d1c1f;
  --lime: #e7fc03;

  --ink: #1a1917; /* body text on paper */
  --ink-soft: #56534c; /* secondary text */
  --ink-faint: #8b877d; /* tertiary / metadata */
  --line: #e0ddd3; /* hairline borders on paper */
  --line-strong: #cbc7ba;

  --on-dark: #f5f4ef;
  --on-dark-soft: #a5a29a;
  --line-dark: #2c2b2e;

  /* type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* scale */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 5rem);

  /* structure */
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------- base ---------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

::selection {
  background: var(--lime);
  color: var(--graphite);
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--graphite);
  color: var(--on-dark);
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* focus visibility (quality floor) */
:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 3px;
  border-radius: 4px;
}
.cta :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--lime);
}

/* eyebrow — the "ledger label" voice */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

.section-title {
  font-size: var(--step-3);
}

.section-head {
  max-width: 24ch;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

[hidden] {
  display: none !important;
}

/* ------------------------------- buttons ------------------------------- */
.btn {
  --bg: transparent;
  --fg: var(--ink);
  --bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
  line-height: 1;
  padding: 0.85em 1.35em;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.25s var(--ease),
    color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn__arrow {
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn__arrow {
  transform: translate(2px, -2px);
}

.btn--ghost {
  --bd: var(--line-strong);
}
.btn--ghost:hover {
  --bg: var(--graphite);
  --fg: var(--on-dark);
  --bd: var(--graphite);
}
.btn--dark {
  --bg: var(--graphite);
  --fg: var(--on-dark);
  --bd: var(--graphite);
}
.btn--accent {
  --bg: var(--lime);
  --fg: var(--graphite);
  --bd: var(--lime);
  font-weight: 600;
}
.btn--outline {
  --bd: rgba(245, 244, 239, 0.35);
  --fg: var(--on-dark);
}
.btn--outline:hover {
  --bg: var(--on-dark);
  --fg: var(--graphite);
  --bd: var(--on-dark);
}

/* ------------------------------- header -------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img {
  height: 24px;
  width: auto;
  /* SVG ships with white fills; render it black on the light header */
  filter: brightness(0);
}

/* -------------------------------- hero --------------------------------- */
.hero {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: var(--section-y);
  border-bottom: 1px solid var(--line);
}
.hero__lead {
  max-width: 62ch;
}
.hero__title {
  font-size: var(--step-3);
  font-weight: 500;
  max-width: 20ch;
}
.hero__desc {
  margin-top: 1.5rem;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.45;
}

/* Platform rating cards merged into the hero */
.hero__sources {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.hero__sources .eyebrow {
  margin-bottom: 1.5rem;
}

/* --------------------------- platform cards ---------------------------- */
.rating-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.rating-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfaf6;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.4s var(--ease);
}
.rating-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 40px -28px rgba(19, 18, 20, 0.4);
}
.rating-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.rating-card__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
}
.rating-card__verify {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3em 0.55em;
  border-radius: 4px;
  white-space: nowrap;
}
.rating-card__verify--ok {
  background: var(--lime);
  color: var(--graphite);
}
.rating-card__verify--pending {
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--line-strong);
}
.rating-card__score {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.rating-card__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.rating-card__den {
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: var(--step--1);
}
.rating-card__count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.rating-card__link {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.rating-card__link span {
  transition: transform 0.3s var(--ease);
}
.rating-card__link:hover span {
  transform: translate(2px, -2px);
}
.rating-card--pending {
  background: repeating-linear-gradient(
    -45deg,
    #fbfaf6,
    #fbfaf6 12px,
    var(--paper-2) 12px,
    var(--paper-2) 24px
  );
}

/* star visualization (shared) */
.stars {
  --pct: 100%;
  display: inline-block;
  position: relative;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.stars::before {
  content: "★★★★★";
  color: var(--line-strong);
}
.stars__fill {
  position: absolute;
  inset: 0;
  width: var(--pct);
  overflow: hidden;
  color: var(--graphite);
}
.stars__fill::before {
  content: "★★★★★";
}
.rating-card .stars {
  font-size: 1.15rem;
}

/* ---------------------- facet pages & navigation ----------------------- */
.crumbs {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.crumbs a:hover {
  color: var(--ink);
  border-color: var(--graphite);
}

.hero__meta {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.hero__links {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.hero__link {
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--lime);
  padding-bottom: 2px;
}
.hero__link:hover {
  border-color: var(--graphite);
}

/* homepage → facet pages; real anchors, not a JS control */
.facet-nav {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.facet-nav__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.facet-nav__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbfaf6;
  text-decoration: none;
  transition: transform 0.3s var(--ease), border-color 0.25s var(--ease);
}
.facet-nav__item:hover {
  transform: translateY(-2px);
  border-color: var(--graphite);
}
.facet-nav__name {
  font-family: var(--font-display);
  font-weight: 500;
}
.facet-nav__count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.footer__col span[aria-current="page"] {
  color: var(--lime);
}

/* ------------------------------- reviews ------------------------------- */
.reviews {
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--line);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: end;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.filter {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 150px;
  flex: 1 1 150px;
}
.filter label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.filter select {
  appearance: none;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background: #fbfaf6
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2356534c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 1rem center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 2.4rem 0.7rem 0.9rem;
  cursor: pointer;
}
.filter__reset {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.7rem 0.2rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filter__reset:hover {
  color: var(--ink);
}

.reviews__count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin: 1.5rem 0;
}
.review-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
/* Long-list rendering cost (DIFWEB-216). All 106 cards stay in the HTML — that
   is the whole point of prerendering, and crawlers and AI assistants read the
   full set — but the browser may skip layout and paint for cards that are off
   screen. The intrinsic size is the MEASURED median card height (442px desktop,
   444px mobile), so the scrollbar does not jump as cards are realised; the
   `auto` keyword lets the browser remember each card's real size once known. */
.review-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 442px;
}

/* Visual-only truncation of a very long list (24,000px desktop / 46,600px
   mobile at 106 cards). Applied by app.js, never in the static markup, so that
   with JS disabled — and for every crawler — the full list is simply visible.
   The container is clipped; no card is ever display:none, so there is no
   hidden-content question. */
.review-cards.is-clipped {
  position: relative;
  max-height: 2600px;
  overflow: hidden;
}
.review-cards.is-clipped::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(244, 243, 238, 0), var(--bg, #f4f3ee));
  pointer-events: none;
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfaf6;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.4s var(--ease);
}
.review-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 40px -30px rgba(19, 18, 20, 0.45);
}
.review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32em 0.6em;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.review-card__summary {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.review-card__summary::before {
  content: "“";
  color: var(--ink-faint);
}
.review-card__summary::after {
  content: "”";
  color: var(--ink-faint);
}
/* the review title as printed on the source platform (not a quotation) */
.review-card__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.01em;
}
/* the review body as published on the source platform */
.review-card__body {
  color: var(--ink-soft);
  line-height: 1.55;
}
.review-card__body p + p {
  margin-top: 0.7rem;
}
.review-card__headline + .review-card__body {
  margin-top: 0.9rem;
}
.review-card__meta {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.review-card__identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.review-card__photo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
}
.review-card__photo--initials {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  background: transparent;
}
.review-card__author {
  font-family: var(--font-display);
  font-weight: 600;
}
.review-card__role {
  color: var(--ink-soft);
  font-size: var(--step--1);
}
/* contextual link from the client's name to their case study on diffco.us */
.review-card__case {
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.review-card__case:hover {
  color: var(--ink);
  border-color: var(--graphite);
}

/* verified context read off the source profile */
.review-card__context {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
/* provenance / ledger line — the signature */
.provenance {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.provenance__sep {
  opacity: 0.5;
}
/* service label -> the diffco.us page that sells that work */
.provenance__service {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--line-strong);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.provenance__service:hover {
  color: var(--ink);
  border-color: var(--graphite);
}

.provenance__link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.provenance__link:hover {
  border-color: var(--graphite);
}
.provenance__flag {
  color: var(--ink-faint);
}

.reviews__empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 3rem 0;
  font-family: var(--font-mono);
}
.reviews__more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* -------------------------------- CTA ---------------------------------- */
.cta {
  background: var(--graphite);
  color: var(--on-dark);
  padding-block: clamp(5rem, 10vw, 9rem);
}
.cta__inner {
  padding-top: 0;
}
.cta__title {
  font-size: var(--step-3);
  font-weight: 500;
  max-width: 16ch;
}
.cta__text {
  margin-top: 1.25rem;
  color: var(--on-dark-soft);
  font-size: var(--step-1);
  max-width: 44ch;
}
.cta__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ------------------------------- footer -------------------------------- */
.site-footer {
  background: var(--graphite);
  color: var(--on-dark);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: 2rem;
  border-top: 1px solid var(--line-dark);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-dark);
}
.logo--footer img {
  /* keep the SVG's native white fill on the dark footer */
  filter: none;
}
.footer__tagline {
  margin-top: 1rem;
  color: var(--on-dark-soft);
  max-width: 26ch;
}
.footer__heading {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 1rem;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer__col a {
  color: var(--on-dark);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.footer__col a:hover {
  border-color: var(--lime);
}
/* disclosure: who runs this site and where the reviews come from */
.footer__about {
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line-dark);
  max-width: 78ch;
}
.footer__about .footer__heading {
  font-size: var(--step-0);
  margin-bottom: 0.75rem;
}
.footer__about p {
  color: var(--on-dark-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}
.footer__about p + p {
  margin-top: 0.7rem;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--on-dark-soft);
}

/* ------------------------------ reveal --------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------- responsive ------------------------------- */
@media (max-width: 1024px) {
  .rating-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .rating-cards {
    grid-template-columns: 1fr;
  }
  .review-cards {
    grid-template-columns: 1fr;
  }
  /* one column here, so the same pixel cap would show half as many cards —
     tighten it to keep the clipped view a comparable length. */
  .review-cards.is-clipped {
    max-height: 2200px;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .filter {
    flex-basis: 100%;
  }
}

@media (max-width: 480px) {
  /* keep the headline inside the viewport on small screens */
  .hero__title {
    font-size: clamp(1.7rem, 7vw, 2.1rem);
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .header__inner {
    min-height: 60px;
  }
}

/* ------------------------- reduced motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}