/* Article-scoped styles for /journal/why-otas-outrank-your-website/.
   Everything else on the page is the Journal's own components.

   1. The sector sections are h3s under one h2 but are listed in the contents
      navigation, so they need the same clearance under the fixed header that
      journal.css gives .bw-prose h2.
   2. The Journal had no data table before this article. "What this actually
      costs you" is a real <table>; on wide screens it reads as a three-column
      grid, and at phone width each row stacks into a labelled block (the
      column name comes from data-label), so it never compresses into slivers
      or pushes the page sideways. */

.bw-prose h3[id] { scroll-margin-top: 100px; }

.bw-prose .ot-table {
  width: 100%; margin: 8px 0 28px;
  border-collapse: separate; border-spacing: 0;
  background: var(--bw-white);
  border: 1px solid var(--bw-line); border-radius: var(--bw-r-md);
  overflow: hidden;
  font-family: 'Karla', sans-serif; font-size: 16px; line-height: 1.55;
  color: var(--bw-body);
}
.bw-prose .ot-table th,
.bw-prose .ot-table td {
  padding: 16px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--bw-line);
}
.bw-prose .ot-table tbody tr:last-child th,
.bw-prose .ot-table tbody tr:last-child td { border-bottom: 0; }
.bw-prose .ot-table thead th {
  background: var(--bw-ink); color: var(--bw-cream);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 0;
}
.bw-prose .ot-table tbody th {
  font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700;
  color: var(--bw-ink); width: 22%;
}
.bw-prose .ot-table tbody tr:nth-child(even) { background: var(--bw-cream); }

@media (max-width: 640px) {
  .bw-prose .ot-table,
  .bw-prose .ot-table tbody,
  .bw-prose .ot-table tr,
  .bw-prose .ot-table th,
  .bw-prose .ot-table td { display: block; width: auto; }
  .bw-prose .ot-table { background: none; border: 0; border-radius: 0; overflow: visible; }
  /* the header row's job is done by each cell's own label */
  .bw-prose .ot-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .bw-prose .ot-table tbody tr,
  .bw-prose .ot-table tbody tr:nth-child(even) {
    background: var(--bw-white);
    border: 1px solid var(--bw-line); border-radius: var(--bw-r-sm);
    margin: 0 0 14px; overflow: hidden;
  }
  .bw-prose .ot-table tbody th {
    width: auto; background: var(--bw-ink); color: var(--bw-cream);
    padding: 12px 16px; font-size: 17px; border-bottom: 0;
  }
  .bw-prose .ot-table td { padding: 12px 16px; }
  .bw-prose .ot-table td::before {
    content: attr(data-label); display: block; margin: 0 0 4px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--bw-muted);
  }
  /* rows are separate cards here, so the last one keeps its inner divider */
  .bw-prose .ot-table tbody tr:last-child td { border-bottom: 1px solid var(--bw-line); }
  .bw-prose .ot-table tbody tr td:last-child { border-bottom: 0; }
}