/*
  Daybook Media
  A daybook is a ledger, so the pieces come from one: navy cloth covers, pale
  ruled paper, red vertical rules, blue horizontal rules, and a marigold tab.
  Colour does two jobs. The five --c-* colours each mean one group of sites and
  mean it everywhere. Navy, cloth green and marigold only ever fill whole bands.
*/

@font-face {
  font-family: "Besley";
  src: url("/assets/fonts/besley-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #eef2e8;
  --paper-2: #e1e8d9;
  --sheet: #f8faf4;
  --ink: #18263d;
  --ink-soft: #46566c;
  --navy: #18263d;
  --on-navy: #eef2e8;
  --on-navy-soft: #c3cfdb;
  --feint: #a9c0d5;
  --red: #c4283a;
  --marigold: #f2b53a;
  --cloth: #1f4638;
  --on-cloth: #e8eee1;

  /* One colour per group of sites, checked together for colour-blind separation on paper. */
  --c-outdoors: #1d8a5b;
  --c-home: #2a6fc9;
  --c-pastimes: #d99a00;
  --c-news: #c4283a;
  --c-tools: #6a55d0;

  --display: "Besley", Rockwell, Georgia, serif;
  --text: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 76rem;
  --side: max(var(--gutter), calc(50% - var(--max) / 2)); /* centres content in a full-width band */
  --margin: 14rem; /* the column that holds a row's heading */
  --measure: 39rem;
  color-scheme: light;
}

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

::selection {
  background: var(--feint);
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--feint);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

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

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

p,
ul,
ol,
dl {
  margin: 0 0 1.1em;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--marigold);
  color: var(--ink);
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dark bands: links and focus rings that show on navy and cloth */

.masthead a,
.hero a,
.opening a,
.band--cloth a,
.cover a {
  text-decoration-color: rgb(169 192 213 / 0.55);
}

.masthead a:hover,
.hero a:hover,
.opening a:hover,
.band--cloth a:hover,
.cover a:hover {
  text-decoration-color: var(--marigold);
}

.masthead :focus-visible,
.hero :focus-visible,
.opening :focus-visible,
.band--cloth :focus-visible,
.cover :focus-visible {
  outline-color: var(--on-navy);
}

/* Masthead */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 1.15rem var(--side);
  background: var(--navy);
  color: var(--on-navy);
}

/* The logo: the mark, then the name with its first word set heavier */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font: 500 1.5625rem/1 var(--display);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.logo__mark {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}

.logo__name {
  font-weight: 800;
}

.logo__name span {
  font-weight: 500;
}

.logo--cover {
  margin-bottom: 0.9rem;
}

.masthead__date {
  margin: 0 auto 0 0.5rem;
  padding-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--on-navy-soft);
}

.masthead__date span + span::before {
  content: ", ";
}

.masthead nav ul,
.cover nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.masthead nav a {
  display: inline-block;
  padding-block: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.masthead nav a:hover {
  border-bottom-color: rgb(169 192 213 / 0.6);
}

.masthead nav a[aria-current="page"] {
  border-bottom-color: var(--marigold);
}

/* Titles are written on ruled lines */

.ruled {
  --pitch: 1.16;
  --base: 1.04em; /* how far down the line box the rule sits: just under Besley's baseline */
  line-height: var(--pitch);
  background-image: linear-gradient(
    to bottom,
    transparent calc(var(--base) - 1px),
    var(--rule, var(--feint)) calc(var(--base) - 1px),
    var(--rule, var(--feint)) var(--base),
    transparent var(--base)
  );
  background-size: 100% calc(var(--pitch) * 1em);
  background-repeat: repeat-y;
}

.hero .ruled,
.opening .ruled {
  --rule: rgb(169 192 213 / 0.3);
}

/* Home hero: the claim on the left, photographs (or the sheet) on the right */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding: clamp(1.75rem, 3.5vw, 3rem) var(--side) clamp(3.5rem, 7vw, 5.5rem);
  background: var(--navy);
  color: var(--on-navy);
}

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 1rem + 5vw, 5.5rem);
  letter-spacing: -0.03em;
}

.hero__title span {
  display: block;
  text-wrap: balance;
}

.hero__lede {
  max-width: 34rem;
  margin: 1.75rem 0 0;
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--on-navy-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin: 2rem 0 0;
}

.btn {
  display: inline-block;
  padding: 0.9rem 1.4rem;
  background: var(--marigold);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 3px;
}

.btn:hover {
  background: #ffcf66;
}

/* The sheet: a ledger page with one tile for every site */

.sheet {
  position: relative;
  margin: 0;
  padding: 1.4rem 1.5rem 1.4rem 3.25rem;
  background: var(--sheet);
  color: var(--ink);
  border-radius: 3px;
  box-shadow: 14px 14px 0 var(--marigold);
}

.sheet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.75rem;
  width: 2px;
  background: var(--red);
}

.sheet__head {
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--feint);
  font: 650 1.25rem/1.2 var(--display);
}

.wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
}

.tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--fam);
  color: #fff;
  transition: opacity 0.15s;
  animation: tile-in 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.25) both;
}

.tile .icon {
  width: 62%;
  height: 62%;
  stroke-width: 2.2;
}

@keyframes tile-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

/* the tiles arrive in a diagonal wave: w = column + row on the 12-column grid */
.w1 { animation-delay: 0.035s; }
.w2 { animation-delay: 0.07s; }
.w3 { animation-delay: 0.105s; }
.w4 { animation-delay: 0.14s; }
.w5 { animation-delay: 0.175s; }
.w6 { animation-delay: 0.21s; }
.w7 { animation-delay: 0.245s; }
.w8 { animation-delay: 0.28s; }
.w9 { animation-delay: 0.315s; }
.w10 { animation-delay: 0.35s; }
.w11 { animation-delay: 0.385s; }
.w12 { animation-delay: 0.42s; }
.w13 { animation-delay: 0.455s; }
.w14 { animation-delay: 0.49s; }
.w15 { animation-delay: 0.525s; }
.w16 { animation-delay: 0.56s; }
.w17 { animation-delay: 0.595s; }
.w18 { animation-delay: 0.63s; }
.w19 { animation-delay: 0.665s; }
.w20 { animation-delay: 0.7s; }

/* group colours: set once here, used by tiles, swatches, bars and segments */
.tile--outdoors, .swatch--outdoors, .bars--outdoors, .seg--outdoors { --fam: var(--c-outdoors); }
.tile--home, .swatch--home, .bars--home, .seg--home { --fam: var(--c-home); }
.tile--pastimes, .swatch--pastimes, .bars--pastimes, .seg--pastimes { --fam: var(--c-pastimes); }
.tile--news, .swatch--news, .seg--news { --fam: var(--c-news); }
.tile--tools, .swatch--tools, .seg--tools { --fam: var(--c-tools); }

.tile--pastimes {
  color: var(--ink);
}

/* An open tile is a site in build or planned: its group's colour as an outline,
   never a fill. Solid means live everywhere on the site. */
.tile--plan {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--fam);
  color: var(--fam);
}

.tile--plan .icon {
  opacity: 0.8;
}

/* marigold is too pale to read as a thin line on paper, so its outline is a deeper gold */
.tile--pastimes.tile--plan,
.bars--pastimes .bars__bar--plan {
  --fam: #9a6e00;
}

.swatch {
  flex: none;
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  background: var(--fam);
}

.swatch--live {
  --fam: var(--ink);
}

.swatch--plan {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--fam, var(--ink));
}

/* the three kinds of buying guide down the left, news and tools down the right */
.key {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 0.45rem 1.25rem;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 3px double var(--ink);
  font-size: 0.9375rem;
  line-height: 1.3;
}

.key__item {
  display: grid;
  grid-template-columns: auto 1.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem;
  cursor: default;
}

.key__item .swatch {
  transform: translateY(0.08rem);
}

.key__n {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sheet .dated {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
}

/* point at a group in the key and the other tiles step back */
.sheet:has(.key--outdoors:hover) .tile:not(.tile--outdoors),
.sheet:has(.key--home:hover) .tile:not(.tile--home),
.sheet:has(.key--pastimes:hover) .tile:not(.tile--pastimes),
.sheet:has(.key--news:hover) .tile:not(.tile--news),
.sheet:has(.key--tools:hover) .tile:not(.tile--tools),
.sheet:has(.key--plan:hover) .tile:not(.tile--plan) {
  opacity: 0.14;
}

/* Photographs: framed like the sheet, on the same marigold offset */

.photo {
  margin: 0;
  border-radius: 3px;
  box-shadow: 14px 14px 0 var(--marigold);
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

/* three photographs, one for each family of guides: a tall one, then two stacked */
.mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  aspect-ratio: 1.25;
  margin: 0;
  border-radius: 3px;
  box-shadow: 14px 14px 0 var(--marigold);
}

.mosaic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  animation: photo-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.mosaic img:first-child {
  grid-row: 1 / span 2;
}

.mosaic img:nth-child(2) {
  animation-delay: 0.12s;
}

.mosaic img:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes photo-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Bands: full-width sections of the home page */

.band {
  padding: clamp(3rem, 7vw, 5.5rem) var(--side);
}

.band--tint {
  background: var(--paper-2);
}

.band--cloth {
  background: var(--cloth);
  color: var(--on-cloth);
}

.band--gold {
  background: var(--marigold);
}

.band--gold a {
  text-decoration-color: var(--ink);
}

.h2 {
  max-width: 24ch;
  margin: 0 0 1.1rem;
  font: 750 clamp(1.875rem, 1.2rem + 2.2vw, 3rem) / 1.08 var(--display);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.h3 {
  margin: 0 0 0.6rem;
  font: 650 1.25rem/1.3 var(--display);
}

.band__intro {
  max-width: var(--measure);
  font-size: 1.1875rem;
}

.dated {
  color: var(--ink-soft);
  font-size: 1rem;
}

/* Text beside the sheet */

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.pair__text > :last-child {
  margin-bottom: 0;
}

/* By place: a list beside the map */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas:
    "text map"
    "list map";
  gap: 1.75rem clamp(2rem, 5vw, 4.5rem);
}

.split__text {
  grid-area: text;
  align-self: end;
}

.split__text > :last-child {
  margin-bottom: 0;
}

.split .map {
  grid-area: map;
  align-self: center;
}

.split .places {
  grid-area: list;
  align-self: start;
  margin-top: 0;
}

.places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.places li {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--feint);
}

.places__name {
  font-weight: 600;
  line-height: 1.3;
}

.places__note {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.places__plan .places__name {
  color: var(--ink-soft);
}

.places__tag {
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: 0.1em;
}

.map {
  margin: 0;
}

.map__svg {
  display: block;
  width: 100%;
  height: auto;
}

.st {
  fill: #d5dece;
}

.st--on {
  fill: var(--c-news);
}

.st--plan {
  fill: none;
  stroke: var(--c-news);
  stroke-width: 2;
  stroke-dasharray: 5 3;
}

.st__t {
  font: 500 12px var(--text);
  fill: var(--ink-soft);
  text-anchor: middle;
}

.st__t--on {
  font-size: 13px;
  font-weight: 700;
  fill: #fff;
}

.st__t--plan {
  font-size: 13px;
  font-weight: 700;
  fill: var(--c-news);
}

.map__name {
  font: 700 22px var(--display);
  fill: #fff;
}

.map__note {
  font: 500 13px var(--text);
  fill: #fff;
}

.map__name--end,
.map__note--end {
  text-anchor: end;
}

.map__dot {
  fill: #fff;
}

.map figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.map__key {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* The path from a question to a sale: a real sequence, so it is numbered */

.flow__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
  list-style: none;
  counter-reset: flow;
  margin: 2.75rem 0 0;
  padding: 0;
}

.flow__steps li {
  position: relative;
  counter-increment: flow;
}

.flow__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--marigold);
  color: var(--ink);
}

.flow__icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

/* the line from one step to the next, and its arrowhead */
.flow__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(1.875rem - 1px);
  left: 4.5rem;
  right: -1.75rem;
  height: 2px;
  background: rgb(232 238 225 / 0.45);
}

.flow__steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(1.875rem - 5px);
  right: -1.75rem;
  width: 10px;
  height: 10px;
  border-top: 2px solid rgb(232 238 225 / 0.7);
  border-right: 2px solid rgb(232 238 225 / 0.7);
  transform: rotate(45deg);
}

.flow__steps h3 {
  margin: 1.2rem 0 0.45rem;
  font: 650 1.25rem/1.25 var(--display);
}

.flow__steps h3::before {
  content: counter(flow) ". ";
  color: var(--marigold);
}

.flow__steps p {
  margin: 0;
}

.flow__steps .query {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem 0.95rem 0.5rem 0.75rem;
  background: var(--sheet);
  color: var(--ink);
  border-radius: 999px;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.query .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ink-soft);
}

/* Three offers, divided like ledger columns */

.offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
  border-top: 2px solid var(--ink);
}

.offer {
  padding: 1.75rem 2rem 0.25rem 0;
}

.offer + .offer {
  padding-left: 2rem;
  border-left: 2px solid var(--red);
}

.offer .icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--red);
  stroke-width: 1.75;
}

.offer h3 {
  margin: 0.9rem 0 0.4rem;
  font: 650 1.375rem/1.25 var(--display);
}

.offer p {
  margin: 0 0 0.8rem;
}

/* What we hold to */

.creed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3.5rem;
  margin: 2rem 0 0;
  border-top: 2px solid var(--ink);
}

.creed > div {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--feint);
}

.creed dt {
  margin-bottom: 0.3rem;
  font: 650 1.3125rem/1.3 var(--display);
}

.creed dd {
  margin: 0;
}

/* The address, large */

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

.reach {
  font: 700 clamp(1.25rem, 0.7rem + 2.7vw, 3rem) / 1.2 var(--display);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.cta .reach {
  max-width: none;
  margin: 1.5rem 0 0;
}

/* Inner pages: a navy title band, then rows */

.opening {
  padding: clamp(1.75rem, 4.5vw, 3.5rem) var(--side) clamp(2.75rem, 6vw, 4.5rem);
  background: var(--navy);
  color: var(--on-navy);
}

.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 750;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.title--page {
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
}

.opening:has(> .photo) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.opening__body {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.opening__body > * {
  max-width: var(--measure);
}

.opening__body > .reach {
  max-width: none;
}

.opening__body > :last-child {
  margin-bottom: 0;
}

.lede {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  line-height: 1.5;
}

.opening .dated {
  color: var(--on-navy-soft);
}

/* Rows: a heading in the margin, a red rule, the entry beside it */

.row {
  display: grid;
  grid-template-columns: var(--margin) minmax(0, 1fr);
  padding-inline: var(--side);
  border-top: 1px solid var(--feint);
}

.opening + .row {
  border-top: 0;
}

.side {
  margin: 0;
  padding: clamp(2rem, 4vw, 3rem) 1.5rem clamp(2rem, 4vw, 3rem) 0;
  font: 650 1.375rem/1.25 var(--display);
  letter-spacing: -0.008em;
  text-align: right;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.entry {
  min-width: 0;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem) 2rem;
  border-left: 2px solid var(--red);
}

.entry > * {
  max-width: var(--measure);
}

.entry > .wide {
  max-width: 52rem;
}

.entry > .reach {
  max-width: none;
  font-size: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
}

.entry > :first-child {
  margin-top: 0;
}

.entry > :last-child {
  margin-bottom: 0;
}

.entry h3 {
  margin: 1.75em 0 0.4em;
  font: 650 1.1875rem/1.3 var(--display);
}

.entry ul {
  padding-left: 1.1em;
}

.entry li {
  margin-bottom: 0.4em;
}

/* Steps: a real sequence, so it is numbered */

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

.entry .steps {
  padding-left: 0;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  margin: 0;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--feint);
}

.steps li:first-child {
  padding-top: 0;
}

.steps li:last-child {
  border-bottom: 0;
}

.steps li::before {
  content: counter(step);
  font: 700 1.3125rem/1.35 var(--display);
  color: var(--red);
}

/* Things we refuse, each struck with a red cross */

.entry .nots {
  list-style: none;
  padding: 0;
}

.nots li {
  position: relative;
  margin-bottom: 0.7rem;
  padding-left: 2rem;
}

.nots li::before,
.nots li::after {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.72em;
  width: 1.05rem;
  height: 2.5px;
  border-radius: 2px;
  background: var(--red);
}

.nots li::before {
  transform: rotate(45deg);
}

.nots li::after {
  transform: rotate(-45deg);
}

/* For brands: the reach section and its charts */

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 2rem 0 2.75rem;
  border-block: 2px solid var(--ink);
}

.kpis > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem 1.15rem 0;
}

.kpis > div + div {
  padding-left: 1.5rem;
  border-left: 2px solid var(--red);
}

.kpis dd {
  margin: 0;
  font: 650 clamp(2.5rem, 1.5rem + 3vw, 4rem) / 1 var(--text);
  letter-spacing: -0.035em;
}

.kpis dt {
  margin-top: 0.4rem;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink-soft);
}

.kpis + .dated {
  max-width: var(--measure);
  margin: -1.75rem 0 2.75rem;
}

.chart {
  margin: 0 0 2.75rem;
}

.segkey.livekey {
  margin: -0.25rem 0 1.5rem;
}

.chart > figcaption {
  margin-bottom: 0.9rem;
  font: 650 1.25rem/1.3 var(--display);
}

.segbar {
  display: flex;
  gap: 2px;
}

.seg {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
}

.seg rect {
  fill: var(--fam);
}

.seg text {
  font: 600 14px var(--text);
  fill: #fff;
}

.seg--pastimes text {
  fill: var(--ink);
}

.segkey {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  font-size: 0.9375rem;
}

.segkey li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.reach__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.reach__grid .chart {
  margin-bottom: 0;
}

.reach__side .places {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.reach__side .h3 {
  margin-bottom: 0.9rem;
}

.reach__side .places + .h3 {
  margin-top: 2.25rem;
}

.reach__side .dated {
  margin: 1.25rem 0 0;
}

.bars__group + .bars__group {
  margin-top: 1.75rem;
}

.bars__head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink);
  font: 600 1.0625rem/1.3 var(--text);
}

.bars__sum {
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

.bars ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bars li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.3rem 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--feint);
}

.bars__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bars__name {
  font-weight: 600;
  line-height: 1.3;
}

.bars__note {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* each bar's width is a share of the track; the padding leaves room for the two figures */
.bars__track {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 4.75rem;
}

.bars__bar {
  display: block;
  flex: none;
}

.bars__bar rect {
  fill: var(--fam);
}

.bars__val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* the part of a subject still in build or planned: an outline, and a softer figure */
.bars__bar--plan {
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--fam);
}

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

/* Diagram: where a sponsor's placement sits on a guide page */

.slot {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem 2.25rem;
  margin: 2rem 0 0;
  padding: 1.75rem;
  background: var(--paper-2);
  border-radius: 3px;
}

.slot__page {
  padding: 1.1rem;
  background: var(--sheet);
  border-radius: 3px;
  box-shadow: 7px 7px 0 var(--ink);
}

.slot__line {
  display: block;
  height: 0.5rem;
  border-radius: 99px;
  background: #c6d1c1;
}

.slot__line--title {
  width: 82%;
  height: 0.95rem;
  margin-bottom: 0.6rem;
  background: var(--ink);
}

.slot__line--short {
  width: 45%;
}

.slot__line--mid {
  width: 72%;
}

.slot__paid {
  display: grid;
  gap: 0.45rem;
  margin: 1rem 0;
  padding: 0.7rem;
  background: #fdf1d0;
  border: 2px solid var(--marigold);
  border-radius: 3px;
}

.slot__tag {
  justify-self: start;
  padding: 0.1rem 0.45rem;
  background: var(--marigold);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 2px;
}

.slot__paid .slot__line {
  background: #e3cf9a;
}

.entry .slot__picks {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  counter-reset: pick;
  margin: 0;
  padding: 0;
}

.slot__picks li {
  counter-increment: pick;
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  align-items: center;
  margin: 0;
}

.slot__picks li::before {
  content: counter(pick);
  font: 700 0.9375rem/1 var(--text);
}

.slot__notes {
  display: grid;
  gap: 1.1rem;
  margin: 0;
}

.slot__note {
  padding-left: 0.9rem;
  border-left: 5px solid var(--marigold);
}

.slot__note--picks {
  border-left-color: var(--ink);
}

.slot__note dt {
  font-weight: 700;
}

.slot__note dd {
  margin: 0;
}

.slot figcaption {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* Back cover */

.cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.5rem 3rem;
  padding: 3rem var(--side) 2rem;
  background: var(--navy);
  color: var(--on-navy);
}

.cover__line {
  max-width: 30rem;
  margin: 0 0 0.9rem;
  font-size: 1rem;
  color: var(--on-navy-soft);
}

.cover__mail {
  margin: 0;
  font-size: 1rem;
}

.cover nav {
  padding-top: 0.35rem;
}

.cover nav a {
  font-size: 1rem;
}

.cover__side {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(169 192 213 / 0.25);
  font-size: 0.875rem;
  color: var(--on-navy-soft);
}

/* Narrower screens */

@media (max-width: 68rem) {
  .hero,
  .pair,
  .opening:has(> .photo) {
    grid-template-columns: minmax(0, 1fr);
  }

  .sheet,
  .mosaic,
  .photo {
    max-width: 38rem;
  }

  .mosaic {
    aspect-ratio: 1.42;
  }

  .flow__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 40rem;
  }

  .flow__steps li {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    column-gap: 1.25rem;
  }

  .flow__steps li > * {
    grid-column: 2;
  }

  .flow__steps li > .flow__icon {
    grid-column: 1;
    grid-row: 1 / span 4;
  }

  .flow__steps h3 {
    margin-top: 0.9rem;
  }

  .flow__steps .query {
    justify-self: start;
  }

  .flow__steps li:not(:last-child)::after {
    top: 4.5rem;
    bottom: -1.25rem;
    left: calc(1.875rem - 1px);
    right: auto;
    width: 2px;
    height: auto;
  }

  .flow__steps li:not(:last-child)::before {
    top: auto;
    bottom: -1.25rem;
    left: calc(1.875rem - 5px);
    right: auto;
    transform: rotate(135deg);
  }

  .reach__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .reach__side .places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* between phone and desktop the three photographs run in one row across the band */
@media (min-width: 40.01rem) and (max-width: 68rem) {
  .mosaic {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.333fr) minmax(0, 1.333fr);
    grid-template-rows: minmax(0, 1fr);
    aspect-ratio: 3.38;
    max-width: none;
    margin-right: 14px;
  }

  .mosaic img:first-child {
    grid-row: auto;
  }
}

@media (max-width: 56rem) {
  .masthead__date {
    display: none;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "text"
      "map"
      "list";
  }

  .offers {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer,
  .offer + .offer {
    padding: 1.5rem 0 0.5rem;
    border-left: 0;
  }

  .offer + .offer {
    border-top: 1px solid var(--feint);
  }

  .creed {
    grid-template-columns: minmax(0, 1fr);
  }

  .row {
    display: block;
    padding-block: 2.25rem;
  }

  .side {
    margin-bottom: 0.9rem;
    padding: 0;
    text-align: left;
  }

  .entry {
    padding: 0 0 0 1rem;
  }

  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpis > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .kpis > div:nth-child(n + 3) {
    border-top: 1px solid var(--feint);
  }

  .cover {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .sheet {
    padding: 1.1rem 1rem 1.1rem 2rem;
    box-shadow: 8px 8px 0 var(--marigold);
  }

  .sheet::before {
    left: 1rem;
  }

  .wall {
    gap: 3px;
  }

  .tile {
    border-radius: 3px;
  }

  .tile .icon {
    width: 70%;
    height: 70%;
  }

  .key {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .photo,
  .mosaic {
    box-shadow: 8px 8px 0 var(--marigold);
  }

  .mosaic {
    gap: 5px;
  }

  .logo {
    gap: 0.55rem;
    font-size: 1.3125rem;
  }

  .logo__mark {
    width: 2.125rem;
    height: 2.125rem;
  }

  .places,
  .reach__side .places {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the map shrinks with the screen: keep only the labels that stay readable */
  .st__t:not(.st__t--on, .st__t--plan),
  .map__note {
    display: none;
  }

  .st__t--on,
  .st__t--plan {
    font-size: 17px;
  }

  .map__name {
    font-size: 26px;
  }

  .bars li {
    grid-template-columns: minmax(0, 1fr);
  }

  .slot {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.25rem;
  }

  .slot__page {
    max-width: 15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile {
    animation: none;
    transition: none;
  }

  .mosaic img {
    animation: none;
  }
}

@media print {
  .skip,
  .masthead nav,
  .cover nav {
    display: none;
  }

  .tile,
  .mosaic img {
    animation: none;
  }
}