/* ==========================================================================
   Carat Brands — design system

   Direction: a gemological grading report, not a wedding blog. The subject is
   verification, so the page borrows the vernacular of a GIA certificate —
   monospaced data, letter grades in ruled boxes, an examination header — and
   keeps the romance out of it entirely. Body copy is set in a serif because
   these are 3,000-word documents people read end to end; headings are a
   grotesque, which inverts the usual review-site pairing.
   ========================================================================== */

:root {
  /* Palette: cool paper and ink, one document blue, one oxide red for warnings. */
  --paper:      #FBFBF9;
  --paper-sunk: #F2F3F1;
  --ink:        #14181F;
  --slate:      #576070;
  --rule:       #DCE0E5;
  --rule-firm:  #B6BDC6;
  --report:     #0B4FA8;
  --report-tint:#EDF2FB;
  --caution:    #9E3319;
  --caution-tint:#FBF0ED;

  --grade-high: #0E6B52;
  --grade-mid:  #7A5B12;
  --grade-low:  #9E3319;

  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --step: 0.75rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-optical-sizing: auto;
}

@media (min-width: 48rem) { body { font-size: 1.125rem; } }

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.4rem); margin-top: 1.9em; }

p, ul, ol { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.4em; }

a { color: var(--report); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--report);
  outline-offset: 3px;
  border-radius: 2px;
}

strong { font-weight: 600; }

/* The eyebrow encodes the document type — review, comparison, guide — because
   the reader's first question on a page like this is "what am I looking at". */
.eyebrow {
  font-family: var(--data);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 0.9rem;
}

.lede {
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--slate);
  max-width: 58ch;
}

/* --- Layout -------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }

/* Data tables break out of the reading column: they are scanned, not read. */
.breakout { max-width: 62rem; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 0.5rem;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
}

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.75rem;
  padding-block: 1.1rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.wordmark span { color: var(--report); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 500;
}
.nav a { color: var(--slate); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* --- Disclosure ---------------------------------------------------------- */

/* FTC: this sits above the first affiliate link, in the visible viewport, and
   is never collapsed behind a toggle. Do not move it to the footer. */
.disclosure {
  font-family: var(--data);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--slate);
  background: var(--paper-sunk);
  border-left: 2px solid var(--rule-firm);
  padding: 0.75rem 1rem;
  margin-bottom: 2rem;
}
.disclosure a { color: var(--slate); }

/* --- Report header (signature element) ----------------------------------- */

/* Modelled on the header block of a grading certificate: subject, examination
   date, examiner, and the grade itself boxed at the right. */
.report {
  border: 1px solid var(--rule-firm);
  border-top: 3px solid var(--ink);
  background: #fff;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 2.5rem;
}

.report__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .report__grid { grid-template-columns: 1fr auto; align-items: start; }
}

.report__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
  font-family: var(--data);
  font-size: 0.8rem;
  margin: 0;
}
.report__meta dt { color: var(--slate); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; padding-top: 0.15em; }
.report__meta dd { margin: 0; }

.grade {
  display: grid;
  place-items: center;
  min-width: 6.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule-firm);
  background: var(--paper-sunk);
}
.grade__value {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.grade__label {
  font-family: var(--data);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 0.45rem;
}
.grade[data-band="high"] .grade__value { color: var(--grade-high); }
.grade[data-band="mid"]  .grade__value { color: var(--grade-mid); }
.grade[data-band="low"]  .grade__value { color: var(--grade-low); }

/* --- Grade chips (used in tables and card lists) ------------------------- */

.chip {
  display: inline-block;
  font-family: var(--data);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  border: 1px solid currentColor;
  min-width: 2.4rem;
  text-align: center;
}
.chip--sig { color: var(--report); letter-spacing: 0.06em; font-size: 0.68rem; }
.chip[data-band="high"] { color: var(--grade-high); }
.chip[data-band="mid"]  { color: var(--grade-mid); }
.chip[data-band="low"]  { color: var(--grade-low); }

/* --- Verdict block ------------------------------------------------------- */

.verdict {
  background: var(--report-tint);
  border: 1px solid #C7D8F2;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  margin: 2.5rem 0;
}
.verdict h2 { margin-top: 0; font-size: 1.25rem; }
.verdict ul { margin-bottom: 0; }

.split {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
}
@media (min-width: 44rem) { .split { grid-template-columns: 1fr 1fr; } }

.split section { border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.split section.is-caution { border-top-color: var(--caution); }
.split h3 { margin: 0 0 0.7rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.split ul { margin: 0; padding-left: 1.1em; font-size: 0.96em; }

/* --- Call to action ------------------------------------------------------ */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
  background: var(--ink);
  padding: 0.8rem 1.3rem;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background 120ms ease, color 120ms ease;
}
.cta:hover { background: var(--report); border-color: var(--report); color: #fff; }
.cta::after { content: "→"; font-family: var(--data); }

.cta--quiet { background: transparent; color: var(--ink); }
.cta--quiet:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.cta-note {
  font-family: var(--data);
  font-size: 0.72rem;
  color: var(--slate);
  margin-top: 0.6rem;
}

/* --- Tables -------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 1.8rem 0; }

/* Comparison tables carry sentence-length values in four columns. Give them a
   floor width and let the wrapper scroll rather than squeezing every cell into
   a two-word ribbon. */
.table-wrap--wide table { min-width: 56rem; }
.table-wrap--wide tbody th { white-space: normal; min-width: 8rem; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}
caption {
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: left;
  padding-bottom: 0.7rem;
}
th, td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border-bottom: 1.5px solid var(--ink);
  white-space: nowrap;
}
tbody th {
  font-family: var(--data);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--slate);
  white-space: nowrap;
}
.num { font-family: var(--data); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--paper-sunk); }

/* --- Retailer cards ------------------------------------------------------ */

.cards {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 46rem) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  background: #fff;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card__name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
/* These are the primary navigation out of the index pages, so they must read
   as links without a hover. Underline stays on; hover only thickens it. */
.card__name a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--report);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.card__name a:hover { color: var(--report); text-decoration-thickness: 3px; }
.card__name a::after { content: " \2192"; color: var(--report); text-decoration: none; display: inline-block; }
.card p { font-size: 0.95rem; color: var(--slate); margin: 0; }
.card__foot { margin-top: auto; padding-top: 0.6rem; font-family: var(--data); font-size: 0.74rem; color: var(--slate); }

/* --- FAQ ----------------------------------------------------------------- */

.faq { margin: 2.5rem 0; }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0;
}
.faq summary {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--data); color: var(--report); }
.faq details[open] summary::after { content: "–"; }
.faq details > *:not(summary) { margin-top: 0.7rem; font-size: 0.98rem; }

/* --- Breadcrumbs --------------------------------------------------------- */

.crumbs {
  font-family: var(--data);
  font-size: 0.74rem;
  color: var(--slate);
  padding-block: 1.1rem 0;
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--rule-firm); }
.crumbs a { color: var(--slate); }

/* --- Footer -------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  margin-top: 5rem;
  padding-block: 2.5rem 3.5rem;
  font-size: 0.9rem;
  color: var(--slate);
}
.footer__cols { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .footer__cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer h2 { font-size: 0.72rem; font-family: var(--data); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.8rem; font-weight: 500; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.4rem; }
.footer a { color: var(--slate); }
.footer__legal { margin-top: 2.5rem; font-size: 0.8rem; font-family: var(--data); line-height: 1.6; }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 8vw, 5.5rem) 1rem; }
.hero h1 { max-width: 18ch; }

/* The scale strip states the grading vocabulary up front — it is the site's
   whole premise, and it doubles as a legend for every chip that follows. */
.scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.scale li {
  font-family: var(--data);
  font-size: 0.72rem;
  color: var(--slate);
  border: 1px solid var(--rule);
  padding: 0.35rem 0.6rem;
  margin: 0;
}
.scale b { color: var(--ink); font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Limits of the review ------------------------------------------------ */

/* Stating what was not tested is an editorial asset here, not a disclaimer, so
   it is set as a proper section rather than hidden in small print. */
.limits {
  border-top: 2px solid var(--rule-firm);
  padding-top: 1.4rem;
  margin: 3rem 0 0;
}
.limits h2 { margin-top: 0; font-size: 1.15rem; }
.limits ul { font-size: 0.98em; }
.grade[data-band="signature"] { min-width: 8.5rem; }
.grade__sig {
  font-family: var(--data);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--report);
  line-height: 1.1;
  text-align: center;
}

/* Price delta, shown beside a figure rather than in its own column. */
.delta {
  font-size: 0.78em;
  color: var(--caution);
  white-space: nowrap;
}


/* --- Product cards ------------------------------------------------------- */

/* Placed high on the page, where the reader is deciding. Not glossy commerce
   tiles: the register stays technical, so each card reads as a catalogue entry
   — a drawn diagram of the cut, a monospaced label, one clear action. */
.pcards-band {
  background: var(--paper-sunk);
  border-block: 1px solid var(--rule);
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  margin-block: 2rem 2.5rem;
}

.pcards-lead {
  font-family: var(--data);
  font-size: 0.78rem;
  color: var(--slate);
  margin: 0 0 1.25rem;
  letter-spacing: 0.01em;
}
.pcards-lead span {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pcards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 34rem) { .pcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pcards { grid-template-columns: repeat(4, 1fr); } }

.pcard {
  background: #fff;
  border: 1px solid var(--rule);
  margin: 0;
  display: flex;
  flex-direction: column;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.pcard:hover {
  border-color: var(--rule-firm);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 24, 31, 0.07);
}

/* A quiet tint per retailer: enough to tell the four apart at a glance without
   inventing brand colours we have no right to use. */
.pcard__art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(11, 79, 168, 0.10), transparent 62%),
    linear-gradient(#FCFCFB, #F4F5F3);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.pcard[data-brand="james-allen"] .pcard__art { background: radial-gradient(ellipse at 50% 120%, rgba(14,107,82,.12), transparent 62%), linear-gradient(#FCFCFB, #F3F6F4); }
.pcard[data-brand="brilliant-earth"] .pcard__art { background: radial-gradient(ellipse at 50% 120%, rgba(122,91,18,.12), transparent 62%), linear-gradient(#FCFCFB, #F7F5F0); }
.pcard[data-brand="rare-carat"] .pcard__art { background: radial-gradient(ellipse at 50% 120%, rgba(158,50,31,.10), transparent 62%), linear-gradient(#FCFCFB, #F7F3F2); }
.pcard[data-brand="grown-brilliance"] .pcard__art { background: radial-gradient(ellipse at 50% 120%, rgba(87,96,112,.14), transparent 62%), linear-gradient(#FCFCFB, #F3F4F5); }
.pcard__art img { width: 100%; height: 100%; object-fit: cover; }

.shape {
  width: 58%;
  max-width: 128px;
  height: auto;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-linejoin: round;
  opacity: 0.55;
  transition: opacity 140ms ease, transform 220ms ease;
}
.pcard:hover .shape { opacity: 0.8; transform: rotate(-4deg) scale(1.04); }

.pcard__body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}
.pcard__brand {
  font-family: var(--data);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--report);
  margin: 0;
}
.pcard__title {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}
.pcard__blurb {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--slate);
  margin: 0;
}
.pcard__cta { margin: auto 0 0; padding-top: 0.9rem; }
.pcard__cta .cta {
  width: 100%;
  justify-content: center;
  font-size: 0.9rem;
  padding: 0.7rem 0.9rem;
}

.pcards-note {
  font-family: var(--data);
  font-size: 0.72rem;
  color: var(--slate);
  margin: 1.1rem 0 0;
  max-width: 78ch;
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .shape { transition: none; }
  .pcard:hover { transform: none; }
  .pcard:hover .shape { transform: none; }
}


/* --- Hero ---------------------------------------------------------------- */

/* The one dark band on the site. Everything else stays on paper, so this reads
   as a cover rather than a theme — and the photograph does the work a CSS
   animation was only gesturing at. */
.hero-wrap {
  position: relative;
  overflow: hidden;
  background: #0B0E13;
  color: #F2F4F6;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/hero.webp");
  background-size: cover;
  background-position: 68% center;
  opacity: 0.9;
}
/* Gradient scrim: the photograph is dark on the left, so the text side needs
   only a light hand. Without it, long lines still lose contrast on wide screens. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #0B0E13 4%, rgba(11,14,19,.92) 34%, rgba(11,14,19,.45) 62%, rgba(11,14,19,.15) 100%);
}
.hero-wrap .hero { position: relative; z-index: 1; }

.hero-wrap .eyebrow { color: #8FB4F0; }
.hero-wrap h1 { color: #FBFBF9; }
.hero-wrap .lead { color: #C3CBD4; }
.hero-wrap .scale li { border-color: rgba(255,255,255,.22); color: #A9B3BE; }
.hero-wrap .scale b { color: #FBFBF9; }

@media (max-width: 46rem) {
  .hero-bg { background-position: 74% center; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(11,14,19,.86) 0%, rgba(11,14,19,.94) 60%); }
}

/* --- Page hero image ----------------------------------------------------- */

.pagehero {
  margin: 1.75rem 0 0;
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
  line-height: 0;
}
.pagehero img { width: 100%; height: auto; }

/* --- Shape strip --------------------------------------------------------- */

/* Used in the 4Cs guide. These are photographic renderings of cut shapes, so
   they sit in an editorial figure with a caption — never as product card art,
   where a reader could mistake one for a listing. */
.shapes {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 40rem) { .shapes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .shapes { grid-template-columns: repeat(6, 1fr); } }
.shapes li { margin: 0; background: #0B0E13; }
.shapes img { width: 100%; height: auto; display: block; }
.shapes figcaption,
.shapes .cap {
  display: block;
  font-family: var(--data);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A9B3BE;
  padding: 0.5rem 0.6rem 0.65rem;
  text-align: center;
}

/* --- Figures ------------------------------------------------------------- */

.figure { margin: 2.5rem 0; }
.figure > img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  display: block;
}
.figure figcaption,
.pagehero figcaption {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--slate);
  margin-top: 0.7rem;
  max-width: 62ch;
}
.pagehero { line-height: 1.55; }

/* Figures inside the reading column break wider than the text. The column is
   sized for reading (68ch); a six-up strip of images at that width is unusable. */
.prose .breakout {
  width: min(58rem, calc(100vw - 2 * var(--gutter)));
  max-width: none;
}

/* --- Category grid ------------------------------------------------------- */

/* Four categories down, four retailers across. Read as rows rather than a
   16-cell matrix: the reader picks a category first, then a shop — which is
   the order the decision actually happens in. */
.catgrid-band {
  background: var(--paper-sunk);
  border-block: 1px solid var(--rule);
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  margin-block: 2rem 2.5rem;
}

.catrow {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 1rem;
}
.catrow:last-of-type { margin-bottom: 0; }

.catrow__head {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}
.catrow__art {
  width: 104px;
  height: 104px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--rule-firm);
}
.catrow__title {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.3rem;
}
.catrow__note {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--slate);
  margin: 0;
}

.catrow__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
@media (min-width: 32rem) { .catrow__links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .catrow__links { grid-template-columns: repeat(4, 1fr); } }

.catrow__links .cta {
  width: 100%;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  font-size: 0.92rem;
  line-height: 1.25;
  text-align: center;
}
.catrow__links .cta::after { content: none; }
.catrow__cta {
  font-family: var(--data);
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 500;
}

@media (min-width: 48rem) {
  .catrow { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: 1.6rem; align-items: center; }
  .catrow__head { margin-bottom: 0; }
}

/* --- Page top band ------------------------------------------------------- */

/* A thin strip of the hero photograph on every interior page. Enough to carry
   the identity through the site without repeating the full dark cover, which
   would fight the reading column below it. */
.pagetop { position: relative; border-bottom: 1px solid var(--rule); overflow: hidden; }
.pagetop__bg {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/hero.webp");
  background-size: cover;
  background-position: 72% 38%;
}
.pagetop__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(92deg, rgba(11,14,19,.94) 0%, rgba(11,14,19,.82) 46%, rgba(11,14,19,.55) 100%);
}
.pagetop .crumbs { position: relative; z-index: 1; padding-block: 1.6rem; color: #A9B3BE; min-height: 4.6rem; display: flex; align-items: center; }
.pagetop .crumbs a { color: #C9D2DB; }
.pagetop .crumbs li + li::before { color: #59636E; }