/* National Capital.
 *
 * The quiet page. Nothing here is set larger than 28px -- not the home page's
 * h1, not the figures, not the rates -- where every other theme in this
 * repository opens at forty to seventy. The body is 15px on a 780px sheet
 * with a wide margin round it. In greyscale that is the signature: a small,
 * evenly ruled reference sheet among thirty-one pages that are all raising
 * their voice in one way or another.
 *
 * It is the design this brand's own writing asked for. Its about page
 * promises no "high-pressure sales tactics", and it is the only site here
 * whose copy is calm enough to survive being set small.
 *
 * The rate card is the one table. It is the only element allowed to run wider
 * than the measure, and its first column -- the price -- is the only place
 * the brand's red appears in any quantity.
 *
 * Radio Canada over Faustina: a broadcaster's UI grotesque for labels,
 * figures and the card, and a warm text serif with a large x-height for
 * everything that is a sentence. Both chosen because they hold up at 15px,
 * which is the only typographic requirement this design really has.
 */

@font-face {
  font-family: "RadioCanada";
  src: url("display.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Faustina";
  src: url("text.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #111418;
  --ink-soft: #2c323a;
  --red: #cc2029;
  --red-deep: #9d1720;
  --paper: #fdfdfc;
  --paper-tint: #f4f4f2;
  --rule: #ddddd8;
  --rule-firm: #b9b9b2;
  --text: #33383f;
  --muted: #6c7178;
  --sheet: 780px;
  --label: "RadioCanada", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body: "Faustina", Georgia, "Times New Roman", serif;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--red-deep);
}

p {
  margin: 0 0 14px;
  max-width: 68ch;
}

/* Visually hidden, but read out. The rate card's caption. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 40;
  background: var(--ink);
  color: #fff;
  padding: 8px 14px;
}

.sheet {
  width: min(100% - 40px, var(--sheet));
  margin-inline: auto;
}

/* ---------- masthead ---------- */

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

.mast__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}

.mast__logo img {
  height: var(--logo-h);
  width: auto;
}

.mast__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--label);
  font-size: 13px;
}

.mast__nav a {
  color: var(--ink);
  text-decoration: none;
}

.mast__nav a:hover {
  color: var(--red);
}

.mast__tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.mast__cta {
  border: 1px solid var(--ink);
  padding: 4px 12px;
}

.mast__cta:hover {
  background: var(--ink);
  color: var(--paper) !important;
}

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

.sec {
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}

.sec--open {
  padding-top: 40px;
  border-top: 0;
}

/* The small label above a heading, and the one inside .h2. Nothing here is
 * big, so the hierarchy is carried by this instead of by size. */
.lbl {
  display: block;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}

.h1 {
  font-family: var(--body);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 22ch;
}

.h2 {
  font-family: var(--body);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 28ch;
}

.lede {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 64ch;
  margin-bottom: 16px;
}

.quiet {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 72ch;
  margin-top: 16px;
}

.prose p {
  margin: 0 0 14px;
}

/* ---------- opening actions ---------- */

.acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 20px 0 0;
}

.btn {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 9px 18px;
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
}

.btn:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
}

.or {
  font-family: var(--label);
  font-size: 13px;
  color: var(--muted);
}

.or a {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 18px 0 0;
  padding: 0;
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.strip li::before {
  content: "· ";
  color: var(--rule-firm);
}

.strip li:first-child::before {
  content: none;
}

/* ---------- the rate card ---------- */

/* The one element allowed to be wider than the measure, and the one allowed
 * to scroll sideways on a narrow screen. A price list that wraps is not a
 * price list. */
.cardwrap {
  overflow-x: auto;
  margin: 20px 0 0;
  -webkit-overflow-scrolling: touch;
}

.card {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-family: var(--label);
  font-size: 13.5px;
}

.card th,
.card td {
  text-align: left;
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  font-weight: 400;
}

.card thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule-firm);
  padding-bottom: 7px;
}

.card tbody th a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-firm);
}

.card tbody th a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* The price column. Ordering the six by what they cost is the argument this
 * table exists to make, so the price is what the eye lands on. */
.card__rate {
  font-weight: 600;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 7.5em;
}

.card tbody tr:last-child th,
.card tbody tr:last-child td {
  border-bottom: 1px solid var(--rule-firm);
}

/* On a product page, that product's row. */
.card .is-here th,
.card .is-here td {
  background: var(--paper-tint);
}

.card .is-here th a {
  font-weight: 600;
  border-bottom: 0;
}

/* Hidden until the card actually has to scroll. A sideways-scrolling table
 * with nothing to say so is a table whose last two columns nobody reads. */
.cardhint {
  display: none;
  font-family: var(--label);
  font-size: 11.5px;
  color: var(--muted);
  margin: 8px 0 0;
}

/* ---------- steps ---------- */

.steps {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  border-top: 1px solid var(--rule);
  padding: 14px 0 4px 44px;
  position: relative;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--red);
}

.steps h3 {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}

/* ---------- label/answer rows ---------- */

.rows {
  margin: 18px 0 0;
}

.rows > div {
  border-top: 1px solid var(--rule);
  padding: 13px 0;
}

.rows > div:last-child {
  border-bottom: 1px solid var(--rule);
}

.rows dt {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}

.rows dd {
  margin: 0;
  max-width: 70ch;
}

/* ---------- product spec ---------- */

.spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 18px 0;
  border-top: 1px solid var(--rule-firm);
  border-bottom: 1px solid var(--rule-firm);
}

.spec > div {
  flex: 1 1 130px;
  padding: 11px 18px 11px 0;
}

.spec dt {
  font-family: var(--label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.spec dd {
  margin: 2px 0 0;
  font-family: var(--label);
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.spec__rate {
  color: var(--red) !important;
  font-weight: 600;
}

.marks {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  max-width: 66ch;
}

.marks li {
  padding: 7px 0 7px 20px;
  position: relative;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}

.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 10px;
  height: 1px;
  background: var(--red);
}

/* ---------- the network figures ---------- */

.net {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-firm);
  padding-top: 16px;
}

.net strong {
  display: block;
  font-family: var(--label);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.net span {
  font-family: var(--label);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- photography ---------- */

/* Half the measure, set into the text rather than across it. */
.plate {
  margin: 22px 0 0;
  width: min(100%, 360px);
}

.plate img {
  width: 100%;
  border: 1px solid var(--rule);
}

/* ---------- application ---------- */

.sec--apply {
  border-top: 1px solid var(--rule-firm);
}

.frame {
  margin: 16px 0 0;
  background: #fff;
  border: 1px solid var(--rule-firm);
}

.frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

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

.foot {
  border-top: 1px solid var(--rule-firm);
  background: var(--paper-tint);
  margin-top: 40px;
  padding: 34px 0 26px;
  font-size: 13.5px;
}

.foot a {
  color: var(--ink);
  text-decoration: none;
}

.foot a:hover {
  color: var(--red);
  text-decoration: underline;
}

.foot__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 28px;
}

.foot__logo {
  height: var(--logo-h);
  width: auto;
  margin-bottom: 12px;
}

.foot p {
  margin: 0 0 10px;
  max-width: 40ch;
}

.foot h4 {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--label);
  font-size: 13px;
}

.foot li {
  padding: 3px 0;
}

/* `.foot .foot__note`, not `.foot__note`: `.foot p` is a class and an element
 * and would otherwise win the measure. */
.foot .foot__note {
  border-top: 1px solid var(--rule);
  margin: 26px 0 0;
  padding-top: 14px;
  font-size: 12px;
  color: var(--muted);
  max-width: none;
}

/* ---------- narrow ---------- */

@media (max-width: 640px) {
  .sheet {
    width: calc(100% - 32px);
  }
  .foot__grid {
    grid-template-columns: 1fr;
  }
  .mast__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* A shrink-to-fit flex row in a column parent never reaches the width that
   * would make it wrap; it runs off the side of the phone instead. */
  .mast__nav {
    width: 100%;
  }
  .plate {
    width: 100%;
  }
  .cardhint {
    display: block;
  }
}