/* =========================================================================
   Alo Coupons — alocoupons.com
   Retro print / newspaper stylesheet. Plain CSS, no build step.
   Palette: newsprint #FAF7F2 · ink #16150F · coupon red #D1373A
   ========================================================================= */

:root {
  /* Ink & paper */
  --paper:      #FAF7F2;
  --paper-tint: #F2ECE1;
  --ink:        #16150F;
  --ink-70:     #4A4740;
  --ink-45:     #6E6A5E;
  --rule:       #C9C2B4;
  --rule-soft:  #E0D9CB;
  --red:        #D1373A;
  --red-ink:    #B32B2E;

  /* Type */
  --display: "Archivo", "Arial Narrow", Helvetica, sans-serif;
  --body:    "Libre Franklin", Helvetica, Arial, sans-serif;
  --mono:    "Courier Prime", "Courier New", Courier, monospace;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  --measure: 1140px;
}

/* ---------- Reset-ish ---------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--paper);
  /* Faint halftone: two offset dot grids, barely visible, like cheap newsprint */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(22, 21, 15, 0.045) 1px, transparent 1.2px),
    radial-gradient(circle at 1px 1px, rgba(22, 21, 15, 0.03) 1px, transparent 1.2px);
  background-size: 7px 7px, 7px 7px;
  background-position: 0 0, 3px 3px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

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

/* ---------- Utilities ---------------------------------------------------- */

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Off-screen shim used by the clipboard fallback in main.js */
.copy-shim {
  position: fixed;
  top: -2000px;
  left: -2000px;
  opacity: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -3rem;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--mono);
  font-size: 0.8rem;
  text-decoration: none;
  transition: top 120ms ease-out;
}
.skip-link:focus { top: var(--sp-4); }

:focus-visible {
  outline: 2px solid var(--red-ink);
  outline-offset: 3px;
}

/* Eyebrow / label type — the Courier Prime voice */
.label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.label--red { color: var(--red-ink); }

/* Rules */
.rule-double {
  height: 3px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.rule-hair {
  height: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.rule-red {
  height: 0;
  border: 0;
  border-top: 2px solid var(--red);
  margin: 0;
}

/* ---------- Links ------------------------------------------------------- */

a {
  color: var(--red-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { background-color: rgba(209, 55, 58, 0.1); }

/* ---------- Folio bar (top strip) --------------------------------------- */

.folio {
  border-bottom: 1px solid var(--ink);
  background-color: var(--paper-tint);
}
.folio__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
  padding-block: var(--sp-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.folio__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.folio__nav a {
  color: var(--ink-70);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.folio__nav a:hover,
.folio__nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--red);
  background-color: transparent;
}

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

.masthead { padding-top: var(--sp-6); }

.masthead__shoulders {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
}
.masthead__shoulder {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-45);
  max-width: 12em;
  line-height: 1.5;
}
.masthead__shoulder--right { text-align: right; }

.masthead__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 72%;
  font-size: clamp(3.25rem, 15.2vw, 10.75rem);
  line-height: 0.86;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.masthead__name .and { color: var(--red); }

.masthead__strap {
  margin: var(--sp-3) 0 var(--sp-3);
  text-align: center;
  font-family: var(--body);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-70);
}

/* Dateline row under the double rule */
.dateline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.dateline__mid { color: var(--ink-45); }
.dateline__issue { color: var(--ink); font-weight: 700; }

/* ---------- Sections ---------------------------------------------------- */

.section { padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-6); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--ink);
}
.section__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 84%;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.section__note {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ---------- Newspaper columns ------------------------------------------- */

.columns {
  column-count: 1;
  column-gap: var(--sp-6);
  column-rule: 1px solid var(--rule-soft);
  font-size: 1.02rem;
  hyphens: auto;
}
.columns p {
  margin: 0 0 var(--sp-4);
  text-align: left;
}
.columns p:last-child { margin-bottom: 0; }

/* Drop cap on the opening paragraph */
.columns > p:first-child::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 88%;
  font-size: 4.15rem;
  line-height: 0.76;
  padding: 0.08em 0.09em 0 0;
  color: var(--red);
}

.byline {
  margin-top: var(--sp-5);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ---------- Perforated ticket divider ----------------------------------- */

.tear {
  position: relative;
  height: 2px;
  margin-block: var(--sp-7);
  background-image: linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 13px);
  background-size: 13px 2px;
  background-repeat: repeat-x;
}
.tear::before,
.tear::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background-color: var(--paper);
  transform: translateY(-50%);
}
.tear::before { left: -9px; }
.tear::after { right: -9px; }

.tear__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--paper);
  padding-inline: var(--sp-4);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-45);
  white-space: nowrap;
}

/* ---------- The list table ---------------------------------------------- */

.tablewrap {
  overflow-x: auto;
  border-bottom: 3px solid var(--ink);
}
.tablewrap:focus-visible { outline-offset: 0; }

.listing {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.96rem;
}
.listing caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--sp-3);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.listing thead th {
  padding: var(--sp-2) var(--sp-3);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
}
.listing tbody th,
.listing tbody td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: baseline;
  text-align: left;
}
.listing tbody th {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: 1.04rem;
}
.listing tbody tr:nth-child(even) { background-color: rgba(22, 21, 15, 0.028); }
.listing .col-cat { color: var(--ink-70); }
.listing .col-date {
  font-family: var(--mono);
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--ink-70);
}
.listing tr.is-spiked th { text-decoration: line-through 1px; }

/* Square print tags — deliberately not rounded */
.tag {
  display: inline-block;
  padding: 2px var(--sp-2);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--ok { background-color: var(--ink); color: var(--paper); }
.tag--spiked { border-color: var(--red-ink); background-color: var(--red-ink); color: var(--paper); }
.tag--hold { border-style: dashed; color: var(--ink-70); }

.table-foot {
  margin: var(--sp-4) 0 0;
  font-size: 0.94rem;
  color: var(--ink-70);
  max-width: 48em;
}

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

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: step;
  border-top: 1px solid var(--rule);
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 68%;
  font-size: 2.9rem;
  line-height: 0.85;
  color: var(--red);
}
.step__title {
  margin: 0 0 var(--sp-1);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 90%;
  font-size: 1.16rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.step__body {
  margin: 0;
  max-width: 44em;
  color: var(--ink-70);
}

/* ---------- Classified-ad subscription box ------------------------------ */

.ad {
  position: relative;
  border: 2px solid var(--ink);
  background-color: var(--paper-tint);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}
.ad::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--ink);
  pointer-events: none;
}
.ad__inner {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
}
.ad__title {
  margin: var(--sp-3) 0 var(--sp-2);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 78%;
  font-size: clamp(1.75rem, 5.4vw, 2.9rem);
  line-height: 0.98;
  text-transform: uppercase;
}
.ad__body {
  margin: 0 0 var(--sp-5);
  color: var(--ink-70);
  font-size: 0.98rem;
}
.ad__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.ad__field {
  flex: 1 1 15rem;
  min-width: 0;
}
.ad__input {
  width: 100%;
  padding: var(--sp-3);
  border: 2px solid var(--ink);
  border-radius: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.95rem;
}
.ad__input::placeholder { color: var(--ink-45); }
.ad__fine {
  margin: var(--sp-4) 0 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--ink-45);
}
.ad__fine a { color: var(--ink-70); }

/* ---------- Buttons ----------------------------------------------------- */

.btn {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid var(--ink);
  border-radius: 0;
  background-color: var(--red);
  color: #FFFFFF;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 88%;
  font-size: 0.94rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.btn:hover {
  background-color: var(--red-ink);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}
.btn--ink { background-color: var(--ink); }
.btn--ink:hover { background-color: #000000; }
.btn--wide { width: 100%; text-align: center; }

.btn-quiet {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--ink);
  background-color: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn-quiet:hover { background-color: var(--ink); color: var(--paper); }

/* ---------- Article pages (this-week, privacy, terms) ------------------- */

.runner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-5) var(--sp-3);
  border-bottom: 3px double var(--ink);
}
.runner__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 72%;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.runner__name a {
  color: inherit;
  text-decoration: none;
}
.runner__name a:hover { background-color: transparent; color: var(--red-ink); }
.runner__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.article { padding-block: var(--sp-6) var(--sp-7); }
.article__head { margin-bottom: var(--sp-5); }
.article__title {
  margin: var(--sp-2) 0 var(--sp-3);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 76%;
  font-size: clamp(2.1rem, 7vw, 4rem);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  max-width: 22em;
}
.article__standfirst {
  margin: 0;
  max-width: 34em;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink-70);
}

.prose { max-width: 40em; }
.prose h2 {
  margin: var(--sp-7) 0 var(--sp-3);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 88%;
  font-size: 1.32rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.prose h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
}
.prose p,
.prose li { color: var(--ink-70); }
.prose p { margin: 0 0 var(--sp-4); }
.prose ul,
.prose ol { margin: 0 0 var(--sp-4); padding-left: 1.35rem; }
.prose li { margin-bottom: var(--sp-2); }
.prose strong { color: var(--ink); }
.prose dl { margin: 0 0 var(--sp-4); }
.prose dt {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: var(--sp-4);
}
.prose dd { margin: var(--sp-1) 0 0; color: var(--ink-70); }
.prose address {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--ink-70);
}

.stamp {
  display: inline-block;
  margin-bottom: var(--sp-5);
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--ink-45);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ---------- Code block (this-week) -------------------------------------- */

.coupon {
  border: 2px solid var(--ink);
  background-color: var(--paper-tint);
  padding: var(--sp-5);
  max-width: 40em;
}
.coupon__label { margin-bottom: var(--sp-3); }
.coupon__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-3);
}
.coupon__code {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 2px dashed var(--ink);
  background-color: var(--paper);
  font-family: var(--mono);
  font-size: clamp(1.1rem, 4.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  word-break: break-all;
  color: var(--ink);
}
.coupon__copy { flex: 0 0 auto; }
.coupon__status {
  margin: var(--sp-3) 0 0;
  min-height: 1.2em;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-ink);
}

.terms-note {
  margin: var(--sp-5) 0 0;
  max-width: 40em;
  padding: var(--sp-4);
  border-left: 3px solid var(--red);
  background-color: rgba(22, 21, 15, 0.03);
  font-size: 0.92rem;
  color: var(--ink-70);
}

.cta-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin: var(--sp-6) 0 0;
}
.cta-block__aside {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.pagefoot-nav {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- 404 --------------------------------------------------------- */

.nf {
  padding-block: var(--sp-8);
  text-align: center;
}
.nf__num {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(6rem, 30vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nf__num span { color: var(--red); }
.nf__title {
  margin: var(--sp-4) 0 var(--sp-3);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 84%;
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  text-transform: uppercase;
}
.nf__body {
  margin: 0 auto var(--sp-6);
  max-width: 32em;
  color: var(--ink-70);
}
.nf__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* ---------- Footer (2 columns) ------------------------------------------ */

.foot {
  margin-top: var(--sp-7);
  border-top: 3px solid var(--ink);
  background-color: var(--paper-tint);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
}
.foot__col h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.foot__brand {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 76%;
  font-size: 1.7rem;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}
.foot__text {
  margin: 0 0 var(--sp-3);
  max-width: 30em;
  font-size: 0.92rem;
  color: var(--ink-70);
}
.foot address {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--ink-70);
}
.foot__links {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}
.foot__links li { margin-bottom: var(--sp-2); }
.foot__links a { color: var(--ink); }
.foot__note {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-45);
}
.foot__bottom {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-4);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
}

/* ---------- Breakpoints ------------------------------------------------- */

@media (min-width: 40rem) {
  .columns { column-count: 2; }
  .steps { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); }
  .step { border-bottom: 1px solid var(--rule); }
  .foot__grid { grid-template-columns: 1.35fr 1fr; gap: var(--sp-7); }
  .ad { padding: var(--sp-7) var(--sp-6); }
}

@media (min-width: 62rem) {
  .columns { column-count: 3; }
  .listing { font-size: 1rem; }
}

/* Print: strip the tint, keep the columns */
@media print {
  body { background: #FFFFFF; color: #000000; }
  .folio, .skip-link, .ad__form, .btn, .btn-quiet { display: none; }
  .foot, .ad { background: none; }
  a { text-decoration: none; color: #000000; }
}

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