/* Pest control, wood grain. Large line art of a board holds each row's corners and edges and fades to nothing
   before the words. The plates in /assets/img/trades/pest-control/ are generated line art. A plate is a mask painted
   in a token tone, so the grain is always tone on tone, and each plate's box stops short of the row's text. */

main { --grain: var(--ramp-1); }
.on-lit { --ground: var(--lit); --grain-strength: 0.7; }
.night { --grain: var(--ramp-3); --grain-strength: 1; }

.plated { isolation: isolate; overflow: clip; }
.plated::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  background-color: var(--grain); opacity: var(--grain-strength, 0.85);
  mask-image: var(--plate), var(--fade);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-size: var(--plate-size, auto), 100% 100%;
  mask-position: var(--plate-at, center), center;
}

.wood-row {
  padding-block: clamp(3.25rem, 6vw, 6rem);

  & .grid { row-gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
  & :is(h2, h3) { font-family: var(--f-head); }
  & h2 { min-width: 0; }
}
.wood-title { font-size: var(--t-xl); font-weight: 780; letter-spacing: -0.04em; line-height: 1; padding-bottom: 0.08em; }
.wood-title-small { font-size: var(--t-l); font-weight: 760; letter-spacing: -0.03em; line-height: 1.05; }

/* Everything stacks by default; the columns open up from lg, where a span still holds a full line. */
main .grid > * { grid-column: 1 / -1; min-width: 0; }

.prose {
  font-size: var(--t-body); line-height: 1.5;

  & p + p { margin-top: 1rem; }
}

/* ---------- Hero ---------- */
.wood-hero {
  padding-top: calc(var(--header-h) + 0.5rem);
  --plate: url('/assets/img/trades/pest-control/hero.svg');
  --plate-at: right top;

  /* The open corner past the count and above the end of "pest control." */
  &::before {
    top: 0; right: 0; width: min(23vw, 20.5rem); height: calc(var(--header-h) + 2.25rem + var(--t-mega) * 1.96);
    --fade: radial-gradient(100% 100% at 100% 0, #000 42%, transparent 97%);
  }
  & .tight-hero-grid { align-items: end; row-gap: clamp(1rem, 2vw, 1.5rem); margin-top: 0; }
  & .tight-greeting { grid-column: 1 / -1; grid-row: 1; line-height: 0.98; }
  & .tight-count { grid-column: 8 / span 3; grid-row: 1; align-self: start; padding: clamp(0.5rem, 2vw, 1.75rem) 0 0; }
  & .tight-headline { grid-column: 1 / span 5; grid-row: 2; align-self: start; margin-top: 0.5rem; font-family: var(--f-head); }
  & .tight-actions { grid-column: 1 / span 5; grid-row: 3; align-self: start; }
  & .wood-lede { grid-column: 7 / -1; grid-row: 2 / span 2; align-self: start; margin-top: 0.5rem; max-width: none; font-size: var(--t-m); line-height: 1.34; }
}

/* ---------- Where leads come from: four even columns of a table ---------- */
.sources-row {
  --plate: url('/assets/img/trades/pest-control/sources.svg');
  --plate-at: right top;

  &::before {
    top: 0; right: 0; width: min(46vw, 42rem); height: clamp(11rem, 19vw, 17.5rem);
    --fade: radial-gradient(100% 100% at 100% 0, #000 34%, transparent 97%);
  }
}
.sources-wrap { overflow: clip; }
.wood-sources-table {
  width: calc(100% + var(--gutter)); max-width: none; table-layout: fixed; font-size: var(--t-s); line-height: 1.35;

  & th, & td { padding: 0.7rem var(--gutter) 0.7rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
  & thead th { font-size: var(--t-xs); font-weight: 700; color: var(--fg-muted); border-bottom: 2px solid var(--fg); box-shadow: none; }
  & tbody th { font-family: var(--f-head); font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; }
  & a { display: inline-block; padding-block: 0.2rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  & td:nth-child(3) { color: var(--fg-muted); }
  & td.has-price { color: var(--fg); font-family: var(--f-head); font-size: 1.0625rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
}

/* ---------- The gap in the inspection: night, with the grain and its galleries down the right edge ---------- */
.gap-row {
  --plate: url('/assets/img/trades/pest-control/inspection.svg');
  --plate-at: right top;

  &::before {
    top: 0; bottom: 0; right: 0; width: min(20vw, 18rem);
    --fade: linear-gradient(to left, #000 44%, transparent 98%);
  }
  & .gap-lead { font-size: var(--t-m); line-height: 1.34; }
}
.gap-text { font-size: var(--t-body); line-height: 1.5; }
.gap-text p + p { margin-top: 1rem; }

/* ---------- Common pests ---------- */
.pests-row {
  --plate: url('/assets/img/trades/pest-control/pests.svg');
  --plate-at: right top;

  &::before {
    top: 0; right: 0; width: min(38vw, 34rem); height: clamp(11rem, 19vw, 17rem);
    --fade: radial-gradient(100% 100% at 100% 0, #000 34%, transparent 97%);
  }
}
.pest-figures {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter);
  font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.pest-big-line { font-family: var(--f-head); font-size: var(--t-m); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; margin-block: 1rem; }
.pest-neither { font-family: var(--f-head); font-size: var(--t-l); font-weight: 760; letter-spacing: -0.03em; line-height: 1.08; }

/* ---------- The pest calendar: months in the header, bars below, clean ground ---------- */
.cal { --bar-h: 2.25rem; }
.cal-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1.5rem;
  padding-bottom: 0.75rem;
  font-family: var(--f-head); font-size: var(--t-l); font-weight: 760; letter-spacing: -0.03em; line-height: 1.05;

  & .cal-note { font-family: var(--f); font-size: var(--t-s); font-weight: 600; letter-spacing: 0; color: var(--fg-muted); }
}
.cal-months {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  font-family: var(--f-head); font-size: var(--t-s); font-weight: 800; letter-spacing: -0.01em; line-height: 1;
  border-block: 2px solid var(--fg);

  & span { padding-block: 0.55rem; }
}
.cal-group { padding-block: 0.75rem; border-bottom: 1px solid var(--line); }
.cal-group:last-child { border-bottom: 0; padding-bottom: 0; }
.cal-season { display: none; }
.cal-tracks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 3px; }

/* A bar is the flat lighter tone where the copy gives only a season, with a solid core laid on it.
   Labels hold on both tones: ground on the ink core 12.48:1, ink on --ramp-1 5.86:1. */
.bar {
  display: flex; align-items: stretch; min-width: 0; min-height: var(--bar-h);
  background-color: var(--ramp-1); color: var(--fg);
  font-size: var(--t-xs); font-weight: 700; line-height: 1; white-space: nowrap;
}
.bar-core { display: flex; align-items: center; justify-content: center; min-width: 0; background-color: var(--fg); color: var(--ground); }
.bar-soft { display: flex; align-items: center; padding-left: 1rem; font-weight: 650; }

/* Cores and stretches in half months: a season's edge is never drawn to the month. */
.bar-termite {
  grid-column: 3 / 11;

  & .bar-core { flex: 0 0 calc(100% * 2.5 / 8); margin-left: calc(100% / 16); }
}
.bar-peak, .bar-fall {
  & .bar-core { flex: 0 0 calc(100% * 2 / 3); margin-left: calc(100% / 6); }
}
.bar-peak { grid-column: 6 / 9; }
.bar-fall { grid-column: 9 / 12; min-height: 1.75rem; }
.bar-yellowjacket {
  grid-column: 8 / 11; align-self: center;

  & .bar-core { flex: 0 0 50%; margin-left: calc(100% / 6); }
}
.bar-rodents {
  grid-column: 9 / 13; grid-row: 1;

  & .bar-core { flex: 0 0 calc(100% * 2.5 / 4); margin-left: 12.5%; }
}
.bar-mice {
  grid-column: 1 / 3; grid-row: 2;

  & .bar-core { flex: 0 0 75%; justify-content: flex-start; padding-left: 0.75rem; }
}
.bar-mice-end {
  grid-column: 12 / 13; grid-row: 2;

  & .bar-core { flex: 0 0 50%; margin-left: 50%; }
}

/* ---------- New owners by month: the big moment, on a night ground of its own, in one screen ---------- */
.owners-row {
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(1.5rem, 2.5vw, 2.25rem);

  & .grid { row-gap: clamp(1rem, 1.5vw, 1.5rem); align-items: end; }
}
.owners-note { margin-top: 0.5rem; font-size: var(--t-m); line-height: 1.3; }
.owners-figure {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center;

  & strong { grid-row: 1 / span 2; font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
  & span { align-self: end; font-weight: 650; line-height: 1.25; }
  & small { align-self: start; font-size: var(--t-xs); color: var(--fg-muted); }
}
.owners-low { font-size: var(--t-body); line-height: 1.35; }
.owners-chart {
  & .big-chart-table { margin-top: 0.25rem; }
  & .data-table-toggle { margin-top: 0; }
  & .data-table { max-width: none; }
}

/* ---------- Mail plan: heading and grain on the left, real steps down the right ---------- */
.mail-row {
  --plate: url('/assets/img/trades/pest-control/mail.svg');
  --plate-at: left bottom;
}
.mail-steps {
  counter-reset: step; display: grid; row-gap: clamp(1rem, 1.8vw, 1.5rem);

  & li {
    counter-increment: step; position: relative; min-height: calc(var(--t-xl) * 1.05); padding-left: clamp(2.75rem, 7vw, 6.25rem);
    font-size: var(--t-body); line-height: 1.42;
  }
  & li::before {
    content: counter(step); position: absolute; left: 0; top: 0;
    font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  & a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}

/* ---------- Cost: six figures in a line (a real table, laid out by rows of the grid), grain along the foot ---------- */
.cost-row {
  --plate: url('/assets/img/trades/pest-control/costs.svg');
  --plate-at: center bottom;
  --plate-size: max(100%, 1800px) auto;
  padding-bottom: clamp(6rem, 13vw, 11rem);

  &::before {
    left: 0; right: 0; bottom: 0; height: clamp(5.5rem, 12vw, 10rem);
    --fade: linear-gradient(to top, #000 36%, transparent 97%);
  }
}
.wood-cost-table {
  display: block; width: 100%; max-width: none;

  & tbody { display: grid; gap: 0; }
  & tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline; padding-block: 0.65rem; border-top: 1px solid var(--line); }
  & tr:first-child { border-top: 2px solid var(--fg); }
  & th, & td { padding: 0; border: 0; }
  & tbody th { text-align: left; font-size: var(--t-s); font-weight: 600; line-height: 1.3; }
  & td { font-family: var(--f-head); font-size: clamp(1.45rem, 1rem + 2vw, 2.9rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
}

/* ---------- Questions: heading with grain under it, question, answer ---------- */
.faq-row {
  --plate: url('/assets/img/trades/pest-control/faq.svg');
  --plate-at: left bottom;
}
.faq-list {
  & > div { border-top: 1px solid var(--line); }
  & > div:first-child { border-top: 2px solid var(--fg); }
  & dt { padding-block: 1rem 0.4rem; font-family: var(--f-head); font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.22; }
  & dd { margin: 0; padding-bottom: 1rem; line-height: 1.45; }
  & dd p + p { margin-top: 0.75rem; }
}

/* ---------- Cities, ZIPs, other trades ---------- */
.cities-row {
  --plate: url('/assets/img/trades/pest-control/cities.svg');
  --plate-at: left center;
}
.zips-block .zips-title { margin: 0 0 0.75rem; font-family: var(--f-head); font-size: var(--t-m); font-weight: 750; letter-spacing: -0.02em; color: var(--fg); }
.wood-row .chip-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem var(--gutter);

  & li { min-width: 0; }
  & .chip { display: flex; justify-content: space-between; width: 100%; padding-inline: 0.85em; }
}

/* ---------- Closing band: a long board along the foot ---------- */
.closing-band {
  --plate: url('/assets/img/trades/pest-control/closing.svg');
  --plate-at: center bottom;
  --plate-size: max(100%, 1800px) auto;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(6rem, 13vw, 11rem);

  &::before {
    left: 0; right: 0; bottom: 0; height: clamp(5.5rem, 12vw, 10.5rem);
    --fade: linear-gradient(to top, #000 34%, transparent 97%);
  }
  & .grid { row-gap: 1rem; align-items: end; }
  & .cta-title { grid-column: 1 / -1; font-family: var(--f-head); padding-bottom: 0.08em; }
  & .cta-body { grid-column: 1 / -1; max-width: none; }
  & .cta-actions { grid-column: 1 / -1; margin-top: 0.5rem; }
}

/* ---------- From lg, every row takes its full width ---------- */
@media (min-width: 992px) {
  .sources-row {
    & .wood-title { grid-column: 1 / span 8; }
    & .note-a { grid-column: 1 / span 5; }
    & .note-b { grid-column: 7 / span 5; }
  }

  /* Ten columns of words; the last two belong to the grain. */
  .gap-row {
    & .wood-title { grid-column: 1 / span 10; }
    & .gap-text { grid-column: 1 / span 10; columns: 2; column-gap: var(--gutter); }
  }

  .pests-row {
    & .wood-title { grid-column: 1 / span 9; }
    /* Six columns of ground with the text held to five, so each figure ends inside its half. */
    & .pest-left { grid-column: 1 / span 6; }
    & .pest-right { grid-column: 7 / span 6; }
    & :is(.pest-left, .pest-right) > p:last-child { max-width: calc((100% + var(--gutter)) * 5 / 6 - var(--gutter)); }
    & .pest-neither { grid-column: 4 / span 8; }
    & .pest-rodents { grid-column: 1 / span 5; }
    & .pest-termites { grid-column: 7 / span 5; }
  }

  .owners-row {
    & .owners-head { grid-column: 1 / span 8; grid-row: 1 / span 2; }
    & .owners-figure { grid-column: 9 / -1; grid-row: 1; }
    & .owners-low { grid-column: 9 / -1; grid-row: 2; }
  }

  .mail-row {
    & .wood-title { grid-column: 1 / span 5; }
    & .mail-steps { grid-column: 6 / -1; grid-row: 1; }
    & .mail-steps li { font-size: var(--t-m); line-height: 1.34; }
    /* The open ground under the heading. */
    &::before {
      left: 0; bottom: 0; width: min(42vw, 37rem); height: calc(100% - 20.5rem);
      --fade: radial-gradient(100% 100% at 0 100%, #000 38%, transparent 97%);
    }
  }

  .cost-row {
    & .wood-title { grid-column: 1 / span 6; }
    & .cost-note { grid-column: 8 / span 5; align-self: end; }
  }
  .wood-cost-table {
    & tbody { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter); }
    & tr { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; row-gap: 1rem; padding-block: 0.75rem 0; border-top: 2px solid var(--fg); }
    & td { text-align: left; }
  }

  .faq-row {
    & .wood-title-small { grid-column: 1 / span 3; }
    & .faq-list { grid-column: 4 / -1; display: grid; grid-template-columns: subgrid; }
    & .faq-list > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
    & dt { grid-column: 1 / span 4; padding-bottom: 1rem; }
    & dd { grid-column: 5 / span 5; padding-top: 1rem; }
    &::before {
      left: 0; bottom: 0; width: min(26vw, 23.5rem); height: calc(100% - 17.5rem);
      --fade: radial-gradient(100% 100% at 0 100%, #000 38%, transparent 97%);
    }
  }

  .cities-row {
    & .cities-head { grid-column: 1 / span 4; grid-row: 1; }
    & .city-table { grid-column: 5 / -1; grid-row: 1 / span 2; }
    & .zips-block { grid-column: 1 / span 4; grid-row: 2; align-self: end; }
    /* The gap between the heading and the ZIPs, running off the left edge. */
    &::before {
      left: 0; top: 14rem; bottom: 20.5rem; width: min(32vw, 29rem);
      --fade: radial-gradient(100% 100% at 0 50%, #000 34%, transparent 97%);
    }
  }

  .trades-row {
    & .wood-title-small { grid-column: 1 / span 2; }
    & .trade-links { grid-column: 3 / -1; display: grid; grid-template-columns: subgrid; align-self: center; }
    & .chip-list { grid-column: 1 / -1; grid-template-columns: subgrid; }
    & .chip-list li { grid-column: span 2; }
  }

  .closing-band {
    & .cta-title { grid-column: 1 / span 7; }
    & .cta-body { grid-column: 8 / -1; grid-row: 1; align-self: end; }
    & .cta-actions { grid-column: 8 / -1; grid-row: 2; margin-top: 0; }
  }
}

/* ---------- From xl the two-month cores hold every label, so the calendar takes its full rows ---------- */
@media (min-width: 1200px) {
  /* Each sentence sits in the months its row leaves open. */
  .cal-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 3px; }
  .cal-tracks { display: contents; }
  .cal-text { grid-column: 3 / 8; padding-inline: 0.75rem 1.5rem; line-height: 1.38; align-self: center; }
  .is-spring .cal-text { margin-top: 0.4rem; }
  .is-summer .cal-text { grid-column: 3 / 6; grid-row: 1; padding-right: 0; white-space: nowrap; }
  .is-late-summer .cal-text { grid-row: 1; }
  .is-fall .cal-text { grid-row: 1 / span 7; }
  .is-winter .cal-text { grid-row: 1 / span 2; }
}

/* ---------- Below xl the calendar is a list by season: the bars stay, the sentences carry the names ---------- */
@media (max-width: 1199.98px) {
  /* The heading takes more of the row here, so the plate gives way before its last letters. */
  .pests-row::before { width: 30vw; }

  .cal { --bar-h: 1rem; }
  .cal-group { padding-block: 0.9rem 1rem; }
  .cal-season {
    display: block; margin-bottom: 0.45rem;
    font-family: var(--f-head); font-size: var(--t-m); font-weight: 750; letter-spacing: -0.02em; line-height: 1.1;
  }
  .bar-name, .bar-soft, .bar.is-extra { display: none; }
  .bar-fall { min-height: var(--bar-h); }
  .cal-text { max-width: 46rem; margin-top: 0.55rem; line-height: 1.42; }
}

/* ---------- 992 to 1199: the chart's number shares four columns with its label ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .owners-figure {
    & strong { font-size: 2.75rem; }
    & span { font-size: var(--t-s); }
  }
}

/* ---------- 768 to 991: two columns hold the measure, and the hero's count stays clear of the greeting ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .wood-hero {
    & .tight-count { grid-column: 7 / -1; padding-top: 0.25rem; }
    & .tight-count-num { font-size: 3.25rem; }
  }
  .sources-row {
    & .note-a { grid-column: 1 / span 6; }
    & .note-b { grid-column: 7 / span 6; }
  }
  .gap-text { columns: 2; column-gap: var(--gutter); }
  .pests-row {
    & :is(.pest-left, .pest-rodents) { grid-column: 1 / span 6; }
    & :is(.pest-right, .pest-termites) { grid-column: 7 / span 6; }
  }
  .mail-row {
    & .wood-title { grid-column: 1 / span 4; }
    & .mail-steps { grid-column: 5 / -1; grid-row: 1; }
  }
  .cost-row {
    & .wood-title { grid-column: 1 / span 6; }
    & .cost-note { grid-column: 7 / -1; align-self: end; }
  }
  .faq-row {
    & .faq-list { display: grid; grid-template-columns: subgrid; }
    & .faq-list > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
    & dt { grid-column: 1 / span 4; padding-bottom: 1rem; }
    & dd { grid-column: 5 / -1; padding-top: 1rem; }
  }
  .zips-block .chip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trades-row .chip-list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 0.5rem; }
}

/* ---------- Below lg only the rows that can give up a strip at the foot keep a plate, and it sits under no text ---------- */
@media (max-width: 991.98px) {
  .wood-hero::before, .sources-row::before, .pests-row::before, .faq-row::before, .cities-row::before, .cost-row::before { display: none; }
  .cost-row { padding-bottom: clamp(3.25rem, 6vw, 6rem); }
  .gap-row, .mail-row, .closing-band { padding-bottom: 7.5rem; }
  .gap-row::before, .mail-row::before, .closing-band::before {
    inset: auto 0 0 0; width: auto; height: 6.5rem;
    --fade: linear-gradient(to top, #000 30%, transparent 97%);
    --plate-at: center bottom;
  }
  .gap-row::before { --plate-at: center 12%; }
}

/* ---------- Phone ---------- */
@media (max-width: 767.98px) {
  .wood-hero {
    & :is(.tight-greeting, .tight-count, .tight-headline, .tight-actions, .wood-lede) { grid-column: 1 / -1; grid-row: auto; }
    /* "pest control." holds one line at 390. */
    & .tight-greeting { font-size: clamp(2.75rem, 14.8vw, 4.5rem); }
    & .tight-count { padding-top: 0; }
    & .wood-lede { font-size: 1.15rem; }
    & .tight-actions .btn { width: 100%; justify-content: center; }
  }

  .cal-months { font-size: 0.6875rem; letter-spacing: -0.02em; }

  .wood-sources-table {
    display: block; width: 100%;

    & thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    & tbody, & tr, & th, & td { display: block; }
    & tr { padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
    & tbody tr:first-child { border-top: 2px solid var(--fg); }
    & th, & td { padding: 0; border: 0; }
    & tbody th { margin-bottom: 0.2rem; }
    & td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 0.75rem; margin-top: 0.3rem; }
    & td::before { content: attr(data-label); font-family: var(--f); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; color: var(--fg-muted); }
  }

  .wood-cost-table tbody th { max-width: 22ch; }

  .wood-row .chip-list .chip { padding-inline: 0.75em; font-size: 0.9375rem; }
  .closing-band .cta-actions .btn { width: 100%; justify-content: center; }
}

/* The one authored moment: as the calendar scrolls in, its bars run left to right along the year. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not(.reduced) .cal-tracks .bar {
      animation: bar-run linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}
@keyframes bar-run {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ==================== The national guide shows no market's number (owner, 2026-11-12) ====================
   The blocks the national switch brought use class names the page by place doesn't use, so nothing here reaches it:
   the hero's national figure, NPMA's season line closing Common pests, the made-up sample row on its own night ground,
   the cost calculator with its results standing in a line the way the cost table's figures did, the national month
   chart, and the covered areas. */

/* The hero's figure from a national source: the number, what it is, who says so. Its words and credit need more room
   than the corner beside "Hello," gives, so from md it heads the right column, level with the headline, and the lede
   follows under it; the corner keeps its grain. */
.wood-hero .hero-national {
  display: grid; row-gap: 0.35rem; align-content: start; padding-top: 0;

  & .tight-count-num { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }
}
.hero-national-what { font-weight: 650; font-size: 1rem; line-height: 1.25; }
.national-source {
  font-size: var(--t-xs); line-height: 1.35; color: var(--fg-muted);

  & a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  & .national-read { display: block; }
}

/* Common pests ends on NPMA's season line, set large on a rule where the calendar's month header stood. */
.pest-peak {
  padding-top: 0.85rem; border-top: 2px solid var(--fg);
  font-family: var(--f-head); font-size: var(--t-l); font-weight: 760; letter-spacing: -0.03em; line-height: 1.08;
}

/* ---------- The sample row: night, its fields standing on rules the way the cost figures did ---------- */
.example-row {
  --plate: url('/assets/img/trades/pest-control/sources.svg');
  --plate-at: right top;

  &::before {
    top: 0; right: 0; width: min(34vw, 30rem); height: clamp(11rem, 19vw, 17rem);
    --fade: radial-gradient(100% 100% at 100% 0, #000 34%, transparent 97%);
  }
}
.example-note { margin-top: 1rem; max-width: 44rem; font-size: var(--t-m); line-height: 1.34; }
.example-tag {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding: 0.3rem 0.75rem;
  border: 2px solid var(--fg);
  font-size: var(--t-xs); font-weight: 750; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase;
}
.example-fields {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 2vw, 1.75rem) var(--gutter);
}
.example-field {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.35rem;
  padding-top: 0.6rem; border-top: 2px solid var(--fg);

  & dt { display: grid; gap: 0.1rem; }
  & dd {
    margin: 0; overflow-wrap: anywhere;
    font-family: var(--f-head); font-size: var(--t-m); font-weight: 780; letter-spacing: -0.02em; line-height: 1.15;
    font-variant-numeric: lining-nums tabular-nums;
  }
}
.example-label { font-size: var(--t-s); font-weight: 650; line-height: 1.3; }
.example-column { font-size: var(--t-xs); color: var(--fg-muted); overflow-wrap: anywhere; }

/* ---------- The cost calculator: the reader's boxes, then four results in a line ----------
   With no script the boxes stay hidden and each result's formula, with the real prices in it, does the explaining.
   What the demo needs from any design (the cursor, the held room for the tag and prompt) is in pages.css. */
.wood-calc-inputs { display: grid; gap: 1.25rem; }
.calc-field {
  & label { font-family: var(--f-head); font-size: var(--t-m); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }
  & input { font-size: var(--t-m); font-weight: 650; font-variant-numeric: tabular-nums; }
}
.calc-entry {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;

  & input { flex: 0 1 14rem; min-width: 0; }
}
.calc-money { position: relative; display: block; max-width: 14rem; }
/* Past the house form rule's own padding (pages.css, .field input), so the dollar sign sits clear of the number. */
.field.calc-field .calc-money input { padding-left: 1.85rem; }
.calc-unit {
  position: absolute; left: 0.85rem; top: 50%; translate: 0 -50%; pointer-events: none;
  font-size: var(--t-m); font-weight: 650; color: var(--ink);
}
.calc-help { max-width: 52ch; font-size: var(--t-xs); line-height: 1.4; color: var(--fg-muted); }
.calc-example {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem;
  border: 2px solid var(--fg);
  font-size: var(--t-xs); font-weight: 750; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase;
}
.calc-go { white-space: normal; text-align: left; }
.calc-prompt { max-width: 30ch; font-family: var(--f-head); font-size: var(--t-m); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }

.wood-calc-results { display: grid; grid-template-columns: minmax(0, 1fr); }
.wood-calc-results .calc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); column-gap: 1rem; align-items: baseline;
  padding-block: 0.7rem; border-top: 1px solid var(--line);

  &:first-child { border-top: 2px solid var(--fg); }
  & dt { font-size: var(--t-s); font-weight: 600; line-height: 1.3; }
  & dd { margin: 0; display: grid; justify-items: end; text-align: right; }
}
.calc-value {
  font-family: var(--f-head); font-size: clamp(1.45rem, 1rem + 2vw, 2.9rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.calc-how { margin-top: 0.35rem; max-width: 30ch; font-size: var(--t-s); line-height: 1.35; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.calc-echo { color: var(--fg); font-weight: 650; }

/* ---------- The national month chart: night, every bar in full tone, since no month is singled out ---------- */
.months-row {
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(1.5rem, 2.5vw, 2.25rem);

  & .grid { row-gap: clamp(1rem, 1.5vw, 1.5rem); align-items: end; }
  & .big-col-bar { background: var(--fg); }
}
.months-source { margin-top: 0.75rem; }
.months-caption { max-width: 44rem; font-size: var(--t-body); line-height: 1.4; }
.months-chart {
  & .big-chart-table { margin-top: 0.25rem; }
  & .data-table-toggle { margin-top: 0; }
  & .data-table { max-width: none; }
}

/* ---------- The covered areas: the heading on the left, one big ruled link to the Coverage page, grain above it ---------- */
.covered-row {
  --plate: url('/assets/img/trades/pest-control/cities.svg');
  --plate-at: right top;

  &::before {
    top: 0; right: 0; width: min(40vw, 36rem); height: clamp(8rem, 13vw, 11rem);
    --fade: radial-gradient(100% 100% at 100% 0, #000 34%, transparent 97%);
  }
}
.covered-caption { margin-top: 0.75rem; max-width: 40rem; font-size: var(--t-m); line-height: 1.3; }
.covered-list { border-block: 2px solid var(--fg); }
.covered-place {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding-block: 0.9rem;
  font-family: var(--f-head); font-size: var(--t-l); font-weight: 760; letter-spacing: -0.03em; line-height: 1.1; text-decoration: none;

  & .fa-solid { flex: none; font-size: 0.6em; transition: translate 0.45s var(--roll); }
  &:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
}
@media (hover: hover) {
  a.covered-place:hover .fa-solid { translate: 6px 0; }
}
html.reduced .covered-place .fa-solid { transition: none; }

@media (min-width: 768px) {
  .wood-hero {
    & .hero-national { grid-column: 7 / -1; grid-row: 2; align-self: start; margin-top: 0.5rem; }
    & .wood-lede.under-national { grid-row: 3; margin-top: clamp(0.25rem, 1vw, 0.75rem); }
  }
  .hero-national-what { max-width: 34rem; }
}
@media (min-width: 576px) {
  .example-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .pests-row .pest-peak { grid-column: 1 / span 8; margin-top: clamp(0.5rem, 1.5vw, 1.25rem); }

  .example-row .example-head { grid-column: 1 / span 8; }
  .example-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* The boxes across the row under the heading, the button at their end; the results in a line of four under them. */
  .cost-row {
    & .wood-calc-inputs { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto minmax(0, 1fr); row-gap: 0.75rem; }
    & .calc-field { align-self: start; }
    & .calc-field:nth-child(1) { grid-column: 1 / span 6; grid-row: 1 / span 2; }
    & .calc-field:nth-child(2) { grid-column: 7 / span 3; grid-row: 1 / span 2; }
    & .calc-go-line { grid-column: 10 / -1; grid-row: 1; padding-top: calc(var(--t-m) * 1.2 + 0.4rem); }
    & .calc-prompt { grid-column: 10 / -1; grid-row: 2; }
    & .wood-calc-results { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(0.5rem, 1.5vw, 1.25rem); }
  }
  .wood-calc-results .calc-row {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 1rem; align-content: start;
    padding-block: 0.75rem 0; border-top: 2px solid var(--fg);

    & dt { min-height: 2.6em; }
    & dd { justify-items: start; align-content: start; text-align: left; }
  }

  .months-row {
    & .months-head { grid-column: 1 / span 8; grid-row: 1; }
    & .months-caption { grid-column: 9 / -1; grid-row: 1; }
    & .months-chart { grid-column: 1 / -1; grid-row: 2; }
  }

  .covered-row {
    & .covered-head { grid-column: 1 / span 6; grid-row: 1; }
    & .covered-list { grid-column: 7 / -1; grid-row: 1; align-self: end; }
  }
}

/* 768 to 991: two columns hold the measure. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cost-row {
    & .wood-calc-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
    & .calc-go-line, & .calc-prompt { grid-column: 1 / -1; }
    & .wood-calc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  }
  .wood-calc-results .calc-row {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 0.75rem; align-content: start;
    padding-block: 0.75rem; border-top: 2px solid var(--fg);

    & dt { min-height: 2.6em; }
    & dd { justify-items: start; align-content: start; text-align: left; }
  }
  .months-row .months-caption { grid-column: 1 / span 9; }
  .covered-row .covered-head { grid-column: 1 / span 9; }
}

/* Below lg the sample's and the covered row's plates give way, as the other rows' do. */
@media (max-width: 991.98px) {
  .example-row::before, .covered-row::before { display: none; }
}

/* ==================== Trade pages by place: /for/pest-control/<state>/ ====================
   The state page keeps the wood grain, the grounds, the plates and the type above, and lays out its own rows here
   (trades/local/pest-control-local.njk). Every rule is scoped to those pages, so nothing above changes on the
   national guide. Rows run hero (yellow), licensing (lit), seller disclosure (night), calendar (yellow), month chart
   (night), costs (lit), places (yellow), links (lit), closing (night). */
[data-page="trade-local"] {
  /* Hero. A place and a trade run long, so the place line is sized by its length to hold one line from md up (0.5em
     is a wide letter's share of Montserrat at this weight), and on a phone by its longest word. */
  & .local-hero {
    & .tight-hero-grid { container-type: inline-size; }
    & .tight-greeting-place { font-size: min(1em, calc(100cqi / var(--place-len, 13) / 0.5)); }
    /* The plate keeps to the corner beside "Hello," so the place line never runs over grain. */
    &::before { height: calc(var(--header-h) + 2.5rem + var(--t-mega) * 0.96); }
  }
  & .place-len-13 { --place-len: 13; } & .place-len-14 { --place-len: 14; } & .place-len-15 { --place-len: 15; } & .place-len-16 { --place-len: 16; }
  & .place-len-17 { --place-len: 17; } & .place-len-18 { --place-len: 18; } & .place-len-19 { --place-len: 19; } & .place-len-20 { --place-len: 20; }
  & .place-len-21 { --place-len: 21; } & .place-len-22 { --place-len: 22; } & .place-len-23 { --place-len: 23; } & .place-len-24 { --place-len: 24; }
  & .place-len-25 { --place-len: 25; } & .place-len-26 { --place-len: 26; } & .place-len-27 { --place-len: 27; } & .place-len-28 { --place-len: 28; }
  & .who-len-6 { --who-len: 6; } & .who-len-7 { --who-len: 7; } & .who-len-8 { --who-len: 8; } & .who-len-9 { --who-len: 9; }
  & .who-len-10 { --who-len: 10; } & .who-len-11 { --who-len: 11; } & .who-len-12 { --who-len: 12; } & .who-len-13 { --who-len: 13; }
  & .who-len-14 { --who-len: 14; } & .who-len-15 { --who-len: 15; } & .who-len-16 { --who-len: 16; }
  /* The lede: the page's opening words, then how the state knows a buyer is moving in, under a rule. */
  & .local-lede {
    & .lede-residence { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--fg); font-size: var(--t-body); line-height: 1.45; }
    & .lede-residence p + p { margin-top: 0.6rem; }
  }

  /* Licensing: the answer on a board of its own, the act's detail beside it, then what IDPH asks for as numbered
     boards with the mail plan's big figures. */
  & .local-license {
    --plate: url('/assets/img/trades/pest-control/sources.svg');
    --plate-at: right top;

    &::before {
      top: 0; right: 0; width: min(24vw, 22rem); height: clamp(11rem, 19vw, 17.5rem);
      --fade: radial-gradient(100% 100% at 100% 0, #000 34%, transparent 97%);
    }
  }
  & .license-answer {
    padding-top: 1rem; border-top: 2px solid var(--fg);

    & p + p { margin-top: 1rem; }
  }
  & .license-lead { font-family: var(--f-head); font-size: var(--t-m); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }
  & .license-counts, & .license-line { font-size: var(--t-body); line-height: 1.5; }
  & .license-counts-note { display: block; margin-top: 0.35rem; font-size: var(--t-s); line-height: 1.4; color: var(--fg-muted); }
  & .license-detail { max-width: 46rem; }
  & .license-needs-title { font-family: var(--f-head); font-size: var(--t-l); font-weight: 760; letter-spacing: -0.03em; line-height: 1.08; }
  & .license-steps {
    counter-reset: need; display: grid; row-gap: clamp(1rem, 1.8vw, 1.5rem);

    & li {
      counter-increment: need; position: relative; min-height: calc(var(--t-xl) * 1.05); padding-left: clamp(2.75rem, 7vw, 5rem);
      font-size: var(--t-body); line-height: 1.45;
    }
    & li::before {
      content: counter(need); position: absolute; left: 0; top: 0;
      font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
      font-variant-numeric: tabular-nums;
    }
  }

  /* The seller disclosure: the form's two questions set large, the rest of the paragraph and the way to the
     national guide's inspection part beside them. */
  & .local-disclosure {
    & .gap-text { columns: auto; }
    & .disclosure-link { margin-top: 1.5rem; }
  }

  /* Links: big arrow links to the same trade elsewhere, ruled like the guide's tables. */
  & .more-links { border-top: 2px solid var(--fg); }
  & .more-link {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 2.75rem; padding-block: 0.7rem; border-bottom: 1px solid var(--line);
    font-family: var(--f-head); font-size: var(--t-m); font-weight: 750; letter-spacing: -0.015em; line-height: 1.2;
    text-decoration: none;

    & .fa-solid { flex: none; font-size: 0.8em; transition: translate 0.45s var(--roll); }
    &:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  }
  & .disclosure-link .more-link { border-top: 2px solid var(--fg); border-bottom: 2px solid var(--fg); }

  /* The calendar as its own row: its heading with the place it holds for, the bars as on the guide. */
  & .local-calendar {
    --plate: url('/assets/img/trades/pest-control/pests.svg');
    --plate-at: right top;

    &::before {
      top: 0; right: 0; width: min(24vw, 22rem); height: clamp(10rem, 17vw, 15rem);
      --fade: radial-gradient(100% 100% at 100% 0, #000 34%, transparent 97%);
    }
    & .calendar-place { margin-top: 0.75rem; max-width: 46rem; font-size: var(--t-m); line-height: 1.3; }
    & .cal-head { justify-content: flex-end; font-size: var(--t-s); }
  }

  /* The month chart: the quietest month and how fresh a row is, where the guide shows the count again. */
  & .local-month {
    & .owners-low { font-size: var(--t-m); line-height: 1.3; }
    & .owners-fresh {
      display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center;
      padding-top: 1rem; border-top: 1px solid var(--line);

      & strong { font-family: var(--f-head); font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
      & span { font-size: var(--t-body); line-height: 1.35; }
    }
  }

  /* Costs: the heading and its basis on the left, the six figures as two rows of three. */
  & .local-costs .costs-head { & .cost-note { margin-top: 1rem; } }

  /* Places: the guide's row turned around, with the grain between the heading and the ZIPs on the right. */
  & .local-places .zips-block { margin-top: 0; }

  /* Links out: the other trades, then this trade's national guide under them. */
  & .local-links {
    & .more-links { margin-top: clamp(0.5rem, 1.5vw, 1rem); }
  }
}
@media (hover: hover) {
  [data-page="trade-local"] .more-link:hover .fa-solid { translate: 4px 0; }
}
html.reduced [data-page="trade-local"] .more-link .fa-solid { transition: none; }

/* From lg, each row takes its full width. */
@media (min-width: 992px) {
  [data-page="trade-local"] {
    & .local-license {
      & .wood-title { grid-column: 1 / span 9; grid-row: 1; }
      & .license-answer { grid-column: 1 / span 5; grid-row: 2; }
      & .license-detail { grid-column: 7 / -1; grid-row: 2; }
      & .license-needs { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: subgrid; row-gap: 1.25rem; margin-top: clamp(0.5rem, 1.5vw, 1.5rem); }
      & .license-needs-title { grid-column: 1 / span 3; }
      & .license-steps {
        grid-column: 4 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter);

        & li { min-height: 0; padding: 0.75rem 0 0; border-top: 2px solid var(--fg); }
        & li::before { position: static; display: block; margin-bottom: 0.75rem; }
      }
    }

    & .local-disclosure {
      & .wood-title { grid-column: 1 / span 10; }
      & .disclosure-lead { grid-column: 1 / span 5; grid-row: 2; }
      & .disclosure-rest { grid-column: 6 / span 5; grid-row: 2; }
    }

    & .local-calendar {
      & .calendar-head { grid-column: 1 / span 9; }
      & .cal { grid-column: 1 / -1; }
    }

    & .local-month {
      & .owners-head { grid-column: 1 / span 8; grid-row: 1 / span 2; }
      & .owners-low { grid-column: 9 / -1; grid-row: 1; }
      & .owners-fresh { grid-column: 9 / -1; grid-row: 2; }
    }

    & .local-costs {
      & .costs-head { grid-column: 1 / span 5; grid-row: 1; }
      & .wood-cost-table { grid-column: 7 / -1; grid-row: 1; }
      & .wood-cost-table tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(1.5rem, 2.5vw, 2.25rem); }
    }

    & .local-places {
      & .city-table { grid-column: 1 / span 8; grid-row: 1 / span 2; }
      & .cities-head { grid-column: 9 / -1; grid-row: 1; }
      & .zips-block { grid-column: 9 / -1; grid-row: 2; align-self: end; }
      &::before {
        left: auto; right: 0; top: 14rem; bottom: 20.5rem; width: min(24vw, 22rem);
        --plate-at: right center;
        --fade: radial-gradient(100% 100% at 100% 50%, #000 34%, transparent 97%);
      }
    }

    & .local-links {
      & .wood-title-small { grid-row: 1 / span 2; align-self: start; }
      & .trade-links { grid-row: 1; }
      & .more-links { grid-column: 3 / span 6; grid-row: 2; }
    }
  }
}

/* 992 to 1199: the fresh figure shares four columns with its line. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  [data-page="trade-local"] .local-month .owners-fresh strong { font-size: 2.75rem; }
}

/* 768 to 991: two columns hold the measure. */
@media (min-width: 768px) and (max-width: 991.98px) {
  [data-page="trade-local"] {
    /* The answer runs across the row (its lead beside the counts), and the act's detail under it in two columns,
       so the detail doesn't run three times the answer's height down a half-width column. */
    & .local-license {
      & .license-answer {
        grid-column: 1 / -1; grid-row: 2;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;

        & p + p { margin-top: 0; }
        & .license-lead { grid-column: 1; grid-row: 1 / span 2; }
        & .license-counts { grid-column: 2; grid-row: 1; }
        & .license-line { grid-column: 2; grid-row: 2; margin-top: 1rem; }
      }
      & .license-detail { grid-column: 1 / -1; grid-row: 3; max-width: none; columns: 2; column-gap: var(--gutter); }
      & .license-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter);

        & li { min-height: 0; padding: 0.75rem 0 0; border-top: 2px solid var(--fg); }
        & li::before { position: static; display: block; margin-bottom: 0.6rem; }
      }
    }
    & .local-disclosure {
      & .gap-text { columns: auto; }
      & .disclosure-lead { grid-column: 1 / span 6; grid-row: 2; }
      & .disclosure-rest { grid-column: 7 / -1; grid-row: 2; }
    }
    & .local-month {
      & .owners-low { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
      & .owners-fresh { grid-column: 7 / -1; grid-row: 2; }
    }
    & .local-links .more-links { grid-column: 1 / span 8; }
  }
}

/* Below lg only the rows that can give up a strip at the foot keep a plate, and it sits under no text. */
@media (max-width: 991.98px) {
  [data-page="trade-local"] {
    & .local-license::before, & .local-calendar::before { display: none; }
    & .license-needs-title { margin-bottom: 1.25rem; }
  }
}

/* Phone. */
@media (max-width: 767.98px) {
  [data-page="trade-local"] {
    /* "Hello," then the place line by its longest word, which may take two lines. */
    & .local-hero .tight-greeting-place { font-size: min(1em, calc(100cqi / var(--who-len, 8) / 0.6)); }
    & .license-needs { margin-top: 0.5rem; }
    & .more-link { font-size: 1.15rem; }
  }
}