/* Matt Jarosy: the site's look.

  A calm, editorial design for a naturopathic nutrition practice: warm paper and sand, deep navy
  ink, and a clay accent taken from the autumn maple on the home page. Petrona (a contemporary
  serif) for headings and long reads, Instrument Sans for everything else. One container, one type
  scale and one set of parts, used the same way on every page.

  In order: fonts; tokens; base; layout; type; buttons and links; header and menu; page heads;
  home; cards and topics; words (prose); consultations, about and FAQs; articles; shop; contact
  and forms; social; search; the not-found page and the old products page; Substack and footer;
  coming into view; editing. */

/* ------------------------------------------------------------------ fonts

  Both free (SIL Open Font License, see assets/fonts/LICENSE.md), kept on the site itself. */

@font-face { font-family: "Petrona"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/petrona-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Petrona"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/petrona-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Petrona"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/petrona-variable-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Petrona"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/petrona-variable-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("/assets/fonts/instrument-sans-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("/assets/fonts/instrument-sans-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("/assets/fonts/instrument-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("/assets/fonts/instrument-sans-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------ tokens */

:root {
  /* colour */
  --paper: #faf7f2;
  --paper-2: #f3ece2;
  --sand: #ecdcc6;
  --sand-2: #e0c8a8;
  --white: #fffdfa;
  --ink: #172638;
  --ink-2: #33414e;
  --muted: #5b6672;
  --clay: #a14e27;
  --clay-2: #873f1e;
  --sage: #657f69;
  --line: rgba(23, 38, 56, .12);
  --line-2: rgba(23, 38, 56, .22);
  --on-ink: rgba(250, 247, 242, .84);
  --on-ink-muted: rgba(250, 247, 242, .64);
  --danger: #a3271c;

  /* type */
  --serif: "Petrona", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text: clamp(1.0625rem, 1.03rem + .16vw, 1.1875rem);
  --small: .9375rem;
  --tiny: .8125rem;
  --h1: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  --h1-long: clamp(2.25rem, 1.55rem + 2.6vw, 3.75rem);
  --h2: clamp(2rem, 1.5rem + 1.9vw, 3.125rem);
  --h3: clamp(1.375rem, 1.22rem + .6vw, 1.75rem);

  /* space and shape */
  --container: 1200px;
  --narrow: 720px;
  --gutter: clamp(20px, 4.2vw, 48px);
  --section: clamp(72px, 8.5vw, 128px);
  --radius-s: 12px;
  --radius: 20px;
  --radius-l: 28px;
  --shadow: 0 1px 2px rgba(23, 38, 56, .05), 0 12px 32px -14px rgba(23, 38, 56, .18);
  --shadow-2: 0 2px 6px rgba(23, 38, 56, .06), 0 34px 70px -30px rgba(23, 38, 56, .38);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 84px;
}

@media (max-width: 480px) {
  :root {
    --header-h: 70px;
  }
}

/* ------------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--text);
  line-height: 1.7;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
svg,
canvas,
iframe,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

p,
ul,
ol,
figure,
blockquote,
fieldset,
h1,
h2,
h3,
h4 {
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

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

.section--ink :focus-visible,
.site-footer :focus-visible,
.cta-band :focus-visible {
  outline-color: var(--paper);
}

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

[hidden] {
  display: none !important;
}

.icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}

.skip-link:focus {
  transform: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ layout */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--narrow) + 2 * var(--gutter));
}

.section {
  padding-block: var(--section);
}

.section--flush {
  padding-top: 0;
}

.section--list {
  padding-top: clamp(28px, 3.5vw, 44px);
}

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

.section--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.section-head {
  display: grid;
  gap: 14px;
  max-width: 780px;
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  max-width: none;
}

.section-head__text {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.split {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--wide-right {
    grid-template-columns: .85fr 1.15fr;
  }
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--paper-2);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

/* ------------------------------------------------------------------ type */

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  font-size: var(--h1);
  line-height: 1.05;
  letter-spacing: -.022em;
}

h2 {
  font-size: var(--h2);
  line-height: 1.1;
  letter-spacing: -.018em;
}

h3 {
  font-size: var(--h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.008em;
}

/* Words that were all in bold on the old site (its headings and leads were) take the design's own
   weight (is-all-bold, marked when the pages were written); a word made bold later shows as bold. */
.is-all-bold strong,
.eyebrow strong {
  font-weight: inherit;
}

/* a long word (an address, a name) breaks rather than pushing the page sideways */
h1,
h2,
h3,
h4 {
  overflow-wrap: anywhere;
}

:is(h1, h2) em {
  color: var(--clay);
  font-style: italic;
}

.eyebrow {
  color: var(--clay);
  font-family: var(--sans);
  font-size: var(--tiny);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lead {
  color: var(--muted);
  font-size: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ buttons and links */

.button {
  --bg: var(--ink);
  --fg: var(--paper);
  --bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 52px;
  padding: .8em 1.55em;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}

.button:hover {
  --bg: var(--clay-2);
  --bd: var(--clay-2);
  box-shadow: 0 12px 26px -14px rgba(135, 63, 30, .7);
}

.button:active {
  transform: translateY(1px);
}

.button .icon {
  width: 1.1em;
  height: 1.1em;
  transition: transform .25s var(--ease);
}

.button:hover .icon:last-child {
  transform: translateX(3px);
}

.button--ghost {
  --bg: transparent;
  --fg: var(--ink);
  --bd: var(--line-2);
}

.button--ghost:hover {
  --bg: var(--ink);
  --fg: var(--paper);
  --bd: var(--ink);
  box-shadow: none;
}

.button--light {
  --bg: var(--paper);
  --fg: var(--ink);
  --bd: var(--paper);
}

.button--light:hover {
  --bg: var(--sand);
  --fg: var(--ink);
  --bd: var(--sand);
  box-shadow: none;
}

.button--small {
  min-height: 44px;
  padding: .6em 1.2em;
  font-size: .9375rem;
}

.button:disabled {
  cursor: progress;
  opacity: .7;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s var(--ease), background-size .35s var(--ease);
}

.text-link:hover {
  background-size: 0 1px;
  color: var(--clay);
}

.text-link .icon {
  width: 1.05em;
  height: 1.05em;
  transition: transform .25s var(--ease);
}

.text-link:hover .icon {
  transform: translateX(3px);
}

/* links that leave the site: their arrow points up and out */
.button:hover .icon--out:last-child,
.text-link:hover .icon--out {
  transform: translate(2px, -2px);
}

@media (max-width: 560px) {
  :is(.hero__actions, .page-head__actions, .service-card__actions, .cta-band__actions) .button,
  .contact-form .form-submit-button,
  .substack-button {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ------------------------------------------------------------------ header and menu */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 247, 242, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(23, 38, 56, .45);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand__logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.brand__name {
  display: grid;
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.brand__tag {
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.primary-nav {
  margin-left: auto;
}

.primary-nav ul {
  display: flex;
  gap: clamp(16px, 1.9vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav a {
  position: relative;
  display: inline-block;
  padding-block: 10px;
  color: var(--ink);
  font-size: .96875rem;
  font-weight: 500;
  text-decoration: none;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-link,
.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  transition: background-color .2s var(--ease);
}

.icon-link:hover,
.menu-toggle:hover {
  background: var(--paper-2);
}

.icon-link .icon {
  width: 21px;
  height: 21px;
}

.site-header__cta {
  margin-left: 8px;
}

.menu-toggle {
  display: none;
  align-content: center;
  gap: 6px;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.menu-toggle span + span {
  width: 15px;
  justify-self: end;
  margin-right: 11px;
}

@media (max-width: 1080px) {
  .primary-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-grid;
  }

  .site-header__actions {
    margin-left: auto;
  }
}

@media (max-width: 599px) {
  .site-header__cta {
    display: none;
  }
}

@media (max-width: 480px) {
  .brand__logo {
    width: 46px;
    height: 46px;
  }

  .brand__name {
    font-size: 1.1875rem;
  }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-menu {
    animation: menu-in .35s var(--ease);
  }

  .mobile-menu nav a {
    animation: menu-link-in .5s var(--ease) both;
  }

  .mobile-menu nav a:nth-child(2) { animation-delay: .03s; }
  .mobile-menu nav a:nth-child(3) { animation-delay: .06s; }
  .mobile-menu nav a:nth-child(4) { animation-delay: .09s; }
  .mobile-menu nav a:nth-child(5) { animation-delay: .12s; }
  .mobile-menu nav a:nth-child(6) { animation-delay: .15s; }
  .mobile-menu nav a:nth-child(7) { animation-delay: .18s; }
  .mobile-menu nav a:nth-child(8) { animation-delay: .21s; }
}

@keyframes menu-in {
  from {
    opacity: 0;
  }
}

@keyframes menu-link-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.mobile-menu__top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.mobile-menu__close .icon {
  width: 24px;
  height: 24px;
}

.mobile-menu__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 32px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.mobile-menu nav {
  display: grid;
  padding-top: 8px;
}

.mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.125rem);
  line-height: 1.2;
  text-decoration: none;
}

.mobile-menu nav a[aria-current="page"] {
  color: var(--clay);
}

.mobile-menu__foot {
  display: grid;
  gap: 20px;
  margin-top: auto;
}

@media (min-width: 700px) {
  .mobile-menu__foot {
    width: min(100%, 520px);
    margin-top: 40px;
  }
}

@media (max-height: 640px) {
  .mobile-menu nav a {
    min-height: 46px;
    font-size: 1.5rem;
  }
}

.mobile-menu__foot .button {
  width: 100%;
}

.mobile-menu__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
}

.mobile-menu__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

body.menu-open {
  overflow: hidden;
}

/* ------------------------------------------------------------------ page heads

  The top of each page: a small heading, the title, a few words and its buttons. */

.page-head {
  padding-block: clamp(48px, 7vw, 104px) clamp(36px, 5vw, 64px);
}

.page-head__inner {
  display: grid;
  gap: 18px;
  justify-items: start;
  max-width: 860px;
}

.page-head .lead {
  max-width: 680px;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.page-head--center .page-head__inner {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* a long title beside its words */
.page-head__grid {
  display: grid;
  gap: 24px 64px;
}

.page-head__title {
  display: grid;
  gap: 18px;
  align-content: start;
}

.page-head__side {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.page-head__title h1 {
  font-size: var(--h1-long);
}

@media (min-width: 960px) {
  .page-head__grid {
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
  }

  .page-head__side {
    padding-top: 36px;
  }

  .page-head__side .lead {
    font-size: 1.125rem;
  }
}

.page-banner {
  overflow: hidden;
  aspect-ratio: 21 / 8;
  border-radius: var(--radius-l);
  background: var(--paper-2);
}

.page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

@media (max-width: 640px) {
  .page-banner {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
  }
}

/* a page head with a photo beside it (About) */
.page-hero {
  padding-block: clamp(40px, 6vw, 88px) var(--section);
}

.page-hero__inner {
  display: grid;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.page-hero__text {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.page-hero__text h1 {
  font-size: var(--h1-long);
}

.page-hero__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 520px;
  justify-self: center;
  border-radius: 999px 999px var(--radius-l) var(--radius-l);
  box-shadow: var(--shadow-2);
}

@media (min-width: 900px) {
  .page-hero__inner {
    grid-template-columns: 1.1fr .9fr;
  }

  .page-hero__photo {
    justify-self: end;
  }
}

/* ------------------------------------------------------------------ home */

.hero {
  padding-block: clamp(32px, 4.5vw, 64px) var(--section);
}

.hero__inner {
  display: grid;
  gap: clamp(44px, 6vw, 88px);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: 1.1fr .9fr;
  }
}

.hero__text {
  display: grid;
  gap: 26px;
  justify-items: start;
}

.hero__title {
  font-size: clamp(2.875rem, 1.7rem + 4.4vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.028em;
}

.hero__text .lead {
  max-width: 34em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  width: 100%;
  margin: 6px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.4;
}

@media (max-width: 560px) {
  .hero__facts {
    flex-direction: column;
  }
}

.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero__facts li:not(.cms-add)::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(101, 127, 105, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526a56' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.hero__media {
  position: relative;
}

.hero__image {
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - var(--header-h) - 64px);
  min-height: 420px;
  width: 100%;
  border-radius: 999px 999px var(--radius-l) var(--radius-l);
  box-shadow: var(--shadow-2);
}

@media (max-width: 959px) {
  .hero__image {
    aspect-ratio: 4 / 3;
    min-height: 0;
    max-height: none;
    border-radius: var(--radius-l);
  }
}

/* the approach: its words, then the two rings */
.approach__head {
  display: grid;
  gap: 20px 72px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.approach__title {
  display: grid;
  gap: 14px;
  align-content: start;
}

@media (min-width: 960px) {
  .approach__head {
    grid-template-columns: .8fr 1.2fr;
  }

  .approach__head .lead {
    padding-top: 30px;
    font-size: 1.1875rem;
  }
}

.rings {
  display: grid;
  gap: 20px;
}

@media (min-width: 1000px) {
  .rings {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.ring {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

@media (min-width: 480px) {
  .ring {
    grid-template-columns: minmax(150px, 210px) 1fr;
  }
}

@media (min-width: 400px) and (max-width: 479px) {
  .ring .chart-legend ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ring__chart {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 230px;
  justify-self: center;
}

.ring__chart canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ring__title {
  position: absolute;
  inset: 26%;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}

.chart-legend ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-legend li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: var(--small);
  line-height: 1.3;
  cursor: default;
  transition: background-color .2s var(--ease);
}

.chart-legend li:hover,
.chart-legend li:focus-visible {
  background: var(--paper-2);
}

.chart-legend li span {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(23, 38, 56, .08);
}

/* a service: what it is, and what a session covers */
.service-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow);
}

@media (min-width: 900px) {
  .service-card {
    grid-template-columns: 1.1fr .9fr;
  }
}

.service-card__body,
.service-card__aside {
  display: grid;
  gap: 20px;
  align-content: start;
  padding: clamp(28px, 4.5vw, 64px);
}

.service-card__body {
  justify-items: start;
}

.service-card__body h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
}

.service-card__aside {
  background: var(--sand);
}

.service-card__aside h3 {
  font-size: 1.375rem;
}

.service-card__promise {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);
  font-style: italic;
  line-height: 1.45;
}

.service-card__promise::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;
  width: 3px;
  border-radius: 3px;
  background: var(--clay);
}

.service-card__actions {
  margin-top: 8px;
}

/* a tick before each point of a list */
.ticks {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li:not(.cms-add) {
  position: relative;
  padding-left: 36px;
  color: var(--ink-2);
  line-height: 1.55;
}

.ticks li:not(.cms-add)::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a14e27' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.ticks li p {
  margin: 0;
}

/* a client's words */
.testimonial {
  display: grid;
  gap: 32px;
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

@media (max-width: 640px) {
  .testimonial {
    gap: 24px;
    text-align: left;
    justify-items: start;
  }
}

.testimonial__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(250, 247, 242, .08);
  color: var(--sand-2);
}

.testimonial__mark .icon {
  width: 28px;
  height: 28px;
}

.testimonial blockquote {
  margin: 0;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + .85vw, 1.75rem);
  font-style: italic;
  font-weight: 350;
  line-height: 1.5;
  text-wrap: pretty;
}

.testimonial figcaption {
  color: var(--on-ink-muted);
  font-size: var(--tiny);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Matt, in brief */
.about-teaser__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-2);
}

.about-teaser__text {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.about-teaser__text .button {
  margin-top: 6px;
}

/* the schools Matt trained with and the bodies he belongs to */
.credentials-row {
  display: grid;
  gap: 22px;
  margin-top: clamp(64px, 7vw, 104px);
}

.credentials-row__title {
  color: var(--muted);
  font-size: var(--tiny);
  font-weight: 600;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.credentials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .credentials {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1000px) {
  .credentials--home {
    grid-template-columns: repeat(6, 1fr);
  }
}

.credential {
  --pad: 18px 22px;
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
}

.credentials--about .credential {
  --pad: 30px 40px;
  aspect-ratio: 16 / 9;
}

.credential img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: var(--pad);
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: .9;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}

@media (hover: none) {
  .credential img {
    filter: none;
    opacity: 1;
  }
}

.credential:hover img {
  filter: none;
  opacity: 1;
}

/* ------------------------------------------------------------------ cards and topics */

.card-grid {
  display: grid;
  gap: clamp(36px, 4vw, 52px) clamp(20px, 2.4vw, 32px);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card-grid > *,
.product-grid > *,
.tiles > *,
.who-list > * {
  min-width: 0;
}

.card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  align-content: start;
}

.card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--paper-2);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform .8s var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.card__more {
  margin-top: auto;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  color: var(--muted);
  font-size: var(--tiny);
  line-height: 1.5;
}

.card__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 14px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  opacity: .6;
}

.card__topic {
  color: var(--clay);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card__heading {
  font-size: clamp(1.3125rem, 1.2rem + .4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
}

.card__title {
  color: var(--ink);
  text-decoration: none;
  transition: color .2s var(--ease);
}

/* the whole card opens the article */
.card__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card:hover .card__title {
  color: var(--clay-2);
}

.card__excerpt {
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.6;
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  color: var(--ink);
  font-size: var(--small);
  font-weight: 600;
}

.card__more .icon {
  transition: transform .25s var(--ease);
}

.card:hover .card__more .icon {
  transform: translateX(4px);
}

/* the newest article, larger */
@media (min-width: 1000px) {
  .card--feature {
    grid-column: 1 / -1;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: none;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    padding-bottom: clamp(16px, 2vw, 24px);
  }

  .card--feature .card__media {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-l);
  }

  .card--feature .card__heading {
    font-size: clamp(2rem, 1.4rem + 1.4vw, 2.75rem);
    line-height: 1.1;
  }

  .card--feature .card__excerpt {
    font-size: 1.125rem;
  }

  .card--feature .card__body {
    gap: 16px;
  }
}

.topics {
  margin-bottom: 8px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 760px) {
  /* one row that scrolls sideways, edge to edge */
  .topics .chips {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
  }

  .topics .chips::-webkit-scrollbar {
    display: none;
  }

  .topics .chips {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }

  .topics .chips li {
    flex: none;
    scroll-snap-align: start;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--small);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.chip:hover {
  border-color: var(--ink);
}

@media (pointer: coarse) {
  .chip {
    min-height: 44px;
  }
}

.chip[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 5vw, 72px);
}

/* ------------------------------------------------------------------ words (prose)

  Words from the editor, set for reading: a comfortable measure, room between paragraphs,
  headings, lists and links. */

.prose {
  color: var(--ink-2);
  line-height: 1.75;
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose :is(h2, h3, h4, .subhead) {
  margin-top: 1.9em;
}

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

.prose :is(h2, h3, h4, .subhead) + * {
  margin-top: .65em;
}

.prose h2 {
  font-size: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);
}

.prose h3 {
  font-size: clamp(1.375rem, 1.22rem + .6vw, 1.6875rem);
}

/* a paragraph that is all in bold reads as a small heading */
.prose .subhead {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.5625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.008em;
}

.prose .subhead strong {
  font-weight: inherit;
}

.prose .is-centered {
  text-align: center;
}

.prose a {
  color: var(--clay-2);
  text-decoration: underline;
  text-decoration-color: rgba(135, 63, 30, .4);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}

.prose a:hover {
  color: var(--clay);
  text-decoration-color: currentColor;
}

.prose strong {
  color: var(--ink);
  font-weight: 650;
}

.prose a strong {
  color: inherit;
}

.prose ul,
.prose ol {
  display: grid;
  gap: .55em;
  padding-left: 0;
  list-style: none;
}

.prose ul > li {
  position: relative;
  padding-left: 1.55em;
}

.prose ul > li:not(.cms-add)::before {
  content: "";
  position: absolute;
  left: .25em;
  top: .72em;
  width: .4em;
  height: .4em;
  border-radius: 50%;
  background: var(--clay);
}

.prose li > p {
  margin: 0;
}

.prose hr {
  height: 1px;
  margin-block: 2.6em;
  border: 0;
  background: var(--line);
}

.prose .figure {
  margin-block: 2.2em;
}

.prose .figure img {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--radius-s);
}

.prose figcaption {
  margin-top: .9em;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--tiny);
  line-height: 1.5;
  text-align: center;
}

.prose blockquote {
  padding-left: 1.2em;
  border-left: 3px solid var(--sand-2);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15em;
  font-style: italic;
}

/* ------------------------------------------------------------------ consultations, about and FAQs */

.who-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: who;
}

@media (min-width: 640px) {
  .who-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .who-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

.who-list li:not(.cms-add) {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.5;
  counter-increment: who;
}

.who-list li:not(.cms-add)::before {
  content: counter(who, decimal-leading-zero);
  color: var(--clay);
  font-family: var(--serif);
  font-size: 1.75rem;
  font-style: italic;
  line-height: 1;
}

.who-list li p {
  margin: 0;
}

/* the story */
.story {
  display: grid;
  gap: 28px 80px;
}

.story__aside {
  display: grid;
  gap: 14px;
  align-content: start;
}

.story__aside h2 {
  font-size: clamp(1.875rem, 1.45rem + 1.5vw, 2.75rem);
}

@media (min-width: 960px) {
  .story {
    grid-template-columns: .8fr 1.2fr;
  }

  .story__aside {
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}

.story__words {
  font-size: 1.125rem;
}

/* a call to book, across the page */
.cta-band {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: clamp(36px, 5.5vw, 80px);
  border-radius: var(--radius-l);
  background: var(--ink) radial-gradient(120% 140% at 100% 0%, rgba(161, 78, 39, .38), transparent 55%);
  color: var(--on-ink);
}

@media (min-width: 900px) {
  .cta-band {
    grid-template-columns: 1fr auto;
    gap: 48px;
  }
}

.cta-band__text {
  display: grid;
  gap: 14px;
  max-width: 640px;
}

.cta-band h2 {
  color: var(--paper);
  font-size: clamp(1.875rem, 1.45rem + 1.6vw, 2.75rem);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* FAQs: each question with its answer; a photo and a way to ask beside them */
.faq-layout {
  display: grid;
  gap: 48px 80px;
}

@media (min-width: 960px) {
  .faq-layout {
    grid-template-columns: 1fr 380px;
    align-items: start;
  }

  .faq-aside {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq {
  display: grid;
  gap: 14px;
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
}

.faq h2 {
  font-size: clamp(1.4375rem, 1.25rem + .7vw, 1.8125rem);
  font-weight: 500;
  line-height: 1.25;
}

.faq p {
  color: var(--ink-2);
}

.faq-aside {
  display: grid;
  gap: 16px;
}

.faq-aside__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}

@media (max-width: 959px) {
  .faq-aside__photo {
    display: none;
  }
}

.faq-aside__card {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--sand);
}

.faq-aside__card h2 {
  font-size: 1.5rem;
}

.faq-aside__card p {
  margin-bottom: 6px;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ articles */

.article-head {
  padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 52px);
}

.article-head__inner {
  display: grid;
  gap: 20px;
  justify-items: center;
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.article-topic {
  color: var(--clay);
  font-size: var(--tiny);
  font-weight: 650;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.article-topic:hover {
  color: var(--clay-2);
  text-decoration: underline;
  text-underline-offset: .25em;
}

.article-head h1 {
  font-size: var(--h1-long);
}

.article-dek {
  max-width: 680px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 16px;
  color: var(--muted);
  font-size: var(--small);
}

.article-meta > * + *::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 16px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  opacity: .5;
}

.article-cover {
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-l);
  background: var(--paper-2);
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .article-cover {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
  }
}

.article-body {
  padding-block: clamp(44px, 5.5vw, 80px) clamp(40px, 5vw, 64px);
}

/* long reads in the serif, a little larger */
.article-body .prose {
  color: #26323e;
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.12rem + .3vw, 1.3125rem);
  line-height: 1.7;
}

.article-body .prose strong {
  font-weight: 650;
}

.article-body .prose ul > li::before {
  top: .68em;
}

.article-body .prose > p:first-child:not(.subhead):not(.is-centered)::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  color: var(--clay);
  font-size: 3.5em;
  font-weight: 400;
  line-height: .82;
}

.article-foot {
  display: grid;
  gap: 28px;
  margin-top: clamp(48px, 5vw, 72px);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.article-tags__label,
.share__label {
  margin-right: 6px;
  color: var(--muted);
  font-size: var(--tiny);
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 18px;
  border-block: 1px solid var(--line);
}

.share__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-item {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.share-item:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.share-item .icon {
  width: 18px;
  height: 18px;
}

/* "Copied", for a moment after copying the link */
.share-copy::after {
  content: "Copied";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.share-copy.is-done::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.share-like[aria-pressed="true"] {
  border-color: var(--clay);
  background: var(--clay);
  color: var(--paper);
}

.share-like[aria-pressed="true"] .icon path {
  fill: currentColor;
}

/* who wrote it */
.author-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.author-card img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: var(--focus, 50% 30%);
}

.author-card__text {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.author-card__name {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 500;
}

.author-card__text p:not(.author-card__name) {
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.6;
}

.author-card .text-link {
  margin-top: 4px;
  font-size: var(--small);
}

/* the articles before and after; the products before and after */
.post-nav {
  display: grid;
  gap: 14px;
  padding-bottom: var(--section);
}

.article + .section {
  padding-top: 0;
}

@media (min-width: 640px) {
  .post-nav {
    grid-template-columns: 1fr 1fr;
  }

  .post-nav .next {
    grid-column: 2;
    text-align: right;
    justify-items: end;
  }
}

.post-nav a {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}

.post-nav a:hover {
  border-color: transparent;
  background: var(--white);
  box-shadow: var(--shadow);
}

.post-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--tiny);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.post-nav__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
}

/* ------------------------------------------------------------------ shop */

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(32px, 4vw, 48px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.shop-toolbar__count {
  color: var(--muted);
  font-size: var(--small);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3vw, 44px) clamp(14px, 2vw, 28px);
}

@media (min-width: 760px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
}

.product-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 9%;
  object-fit: contain;
  transition: opacity .5s var(--ease), transform .8s var(--ease);
}

.product-card__media img + img {
  opacity: 0;
}

.product-card:hover .product-card__media img {
  transform: scale(1.04);
}

.product-card:hover .product-card__media img:first-child:not(:only-child) {
  opacity: 0;
}

.product-card:hover .product-card__media img + img {
  opacity: 1;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-card__price {
  margin-top: auto;
}

.product-card__heading {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}

.product-card__title {
  color: var(--ink);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.product-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card:hover .product-card__title {
  color: var(--clay-2);
}

.product-card__price {
  color: var(--muted);
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
}

/* one product */
.section--product {
  padding-top: clamp(28px, 4vw, 48px);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--small);
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--line-2);
}

.product {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
  }

  .product__gallery {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

.gallery-main {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-l);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.gallery-slide {
  position: absolute;
  inset: 0;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  padding: 7%;
  object-fit: contain;
}

.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.gallery-thumb {
  width: 76px;
  height: 76px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  opacity: .65;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
}

.gallery-thumb:hover,
.gallery-thumb[aria-current="true"] {
  border-color: var(--ink);
  opacity: 1;
}

.product__details {
  display: grid;
  gap: 22px;
  align-content: start;
}

.product__title {
  font-size: var(--h1-long);
  line-height: 1.08;
}

.product__price {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.625rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.product__words {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.product__words p {
  color: var(--ink-2);
}

.product__words a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color .2s var(--ease), color .2s var(--ease);
}

.product__words a:hover {
  color: var(--clay-2);
  text-decoration-color: currentColor;
}

.product__words .is-button u {
  text-decoration: none;
}

.product__buy {
  margin: -6px 0 0;
}

/* the old site's small headings under a product: "UK Based", "30% Off With CODE" */
.product__words .product__line {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}

.product__words .product__line strong {
  font-weight: 600;
}

/* a line that is only a link (where the product is sold) is the product's button (site.js marks it) */
.product__words .is-button > a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 52px;
  padding: .8em 1.6em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}

.product__words .is-button > a::after {
  content: "";
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.product__words .is-button > a:hover {
  background: var(--clay-2);
  box-shadow: 0 12px 26px -14px rgba(135, 63, 30, .7);
}

.product__words .is-button > a strong {
  font-weight: inherit;
}

/* a discount code: a button that copies it (site.js) */
.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: -6px;
  padding: 8px 8px 8px 16px;
  border: 1.5px dashed var(--clay);
  border-radius: 12px;
  background: rgba(161, 78, 39, .06);
  color: var(--clay-2);
  transition: background-color .2s var(--ease);
}

.code-copy:hover {
  background: rgba(161, 78, 39, .12);
}

.code-copy__code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .06em;
}

.code-copy__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--clay);
  color: var(--paper);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.code-copy__action::after {
  content: "Copy";
}

.code-copy.is-done .code-copy__action::after {
  content: "Copied";
}

.code-copy__action .icon {
  width: 15px;
  height: 15px;
}

.product__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-s);
  background: var(--paper-2);
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.55;
}

.product__note .icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--sage);
}

.product__details .share {
  padding-block: 14px;
}

/* the long list of a product's details (the red light lamp) */
.product-more {
  display: grid;
  gap: 28px 80px;
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

@media (min-width: 960px) {
  .product-more {
    grid-template-columns: .8fr 1.2fr;
    align-items: start;
  }

  .product-more__head {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

.product-more .prose {
  max-width: 720px;
}

.product-more .prose > p + p:not(.subhead) {
  margin-top: .3em;
}

.product-nav {
  margin-top: clamp(48px, 5vw, 72px);
  padding-bottom: 0;
}

.product-grid--related {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .product-grid--related {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ------------------------------------------------------------------ contact and forms */

.main-contact .contact {
  padding-top: clamp(48px, 7vw, 104px);
}

/* the words and details, the form, then the map; on wide screens the form beside the rest */
.contact-layout {
  display: grid;
  grid-template-areas: "intro" "form" "map";
  gap: clamp(32px, 5vw, 56px) clamp(40px, 5vw, 80px);
}

.contact-intro {
  grid-area: intro;
}

.contact-layout .form-card {
  grid-area: form;
}

.contact-layout .map-block {
  grid-area: map;
}

@media (min-width: 1000px) {
  .contact-layout {
    grid-template-columns: .9fr 1.1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro form" "map form";
    align-items: start;
  }
}

.contact-intro {
  display: grid;
  gap: 20px;
  align-content: start;
}

.contact-intro h1 {
  font-size: var(--h1);
}

.contact-details {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-detail__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--clay-2);
}

.contact-detail__icon .icon {
  width: 21px;
  height: 21px;
}

.contact-detail__label {
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--tiny);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact-detail > div {
  min-width: 0;
}

.contact-detail__value {
  overflow-wrap: anywhere;
  display: inline-block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, .75rem + 1.5vw, 1.3125rem);
  line-height: 1.35;
  text-decoration: none;
}

a.contact-detail__value:hover {
  color: var(--clay-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.map-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  background: var(--paper-2);
}

.map-box .map,
.map-box .map-link,
.map-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* the place, until the map is asked for: a quiet pattern of contour lines */
.map-facade {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='220' viewBox='0 0 240 220' fill='none' stroke='%23a14e27' stroke-opacity='.11' stroke-width='1.2'%3E%3Cpath d='M0 24C40 12 80 12 120 24S200 36 240 24'/%3E%3Cpath d='M0 68C40 52 80 52 120 68S200 84 240 68'/%3E%3Cpath d='M0 112C40 102 80 102 120 112S200 122 240 112'/%3E%3Cpath d='M0 156C40 141 80 141 120 156S200 171 240 156'/%3E%3Cpath d='M0 200C40 188 80 188 120 200S200 212 240 200'/%3E%3C/svg%3E") 0 0 / 240px 220px,
    radial-gradient(circle at 50% 42%, rgba(255, 253, 250, .9), rgba(255, 253, 250, 0) 62%),
    var(--sand);
  text-align: center;
}

.map-facade__pin {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 10px 24px -10px rgba(135, 63, 30, .7);
  color: var(--paper);
}

.map-facade__pin .icon {
  width: 24px;
  height: 24px;
}

.map-facade__place {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
}

.map-facade__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 20px;
  margin-top: 4px;
}

.map-facade .text-link {
  font-size: var(--small);
}

.form-card {
  padding: clamp(24px, 4vw, 52px);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow);
}

.contact-form .field-list {
  display: grid;
  gap: 22px;
}

.contact-form fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

.contact-form .name {
  display: grid;
  gap: 14px;
}

@media (min-width: 560px) {
  .contact-form .name {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form legend {
  margin-bottom: 10px;
  padding: 0;
  color: var(--ink);
  font-size: var(--small);
  font-weight: 650;
}

.contact-form .caption,
.contact-form .title {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: var(--small);
  font-weight: 650;
  line-height: 1.4;
}

.contact-form .name .caption {
  color: var(--muted);
  font-size: var(--tiny);
  font-weight: 500;
}

.contact-form .description {
  margin-left: 6px;
  color: var(--muted);
  font-size: var(--tiny);
  font-weight: 400;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}

.contact-form textarea {
  min-height: 168px;
  resize: vertical;
}

.contact-form :is(input, textarea):hover {
  border-color: rgba(23, 38, 56, .4);
}

.contact-form :is(input, textarea):focus {
  border-color: var(--ink);
  outline: none;
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(23, 38, 56, .1);
}

.contact-form [aria-invalid="true"] {
  border-color: var(--danger) !important;
}

.contact-form .form-top:focus {
  outline: none;
}

.contact-form .field-error,
.contact-form .form-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--danger);
  font-size: var(--small);
  line-height: 1.45;
}

.contact-form .field-error {
  margin-top: 8px;
}

.contact-form .form-error {
  margin-bottom: 22px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fbeceb;
}

.form-error-icon {
  flex: none;
  margin-top: 3px;
  fill: currentColor;
}

.contact-form .form-trap {
  position: absolute;
  left: -9999px;
}

.contact-form .form-button-wrapper {
  margin-top: 28px;
}

.contact-form .form-submit-button {
  min-width: 180px;
}

.form-thanks {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: clamp(24px, 4vw, 48px) 12px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: center;
}

.form-thanks .icon {
  width: 56px;
  height: 56px;
  padding: 14px;
  border-radius: 50%;
  background: rgba(101, 127, 105, .16);
  color: #4c6651;
}

.form-thanks:focus {
  outline: none;
}

/* ------------------------------------------------------------------ social */

.insta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .insta-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

@media (min-width: 1000px) {
  .insta-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.insta-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-s);
  background: var(--paper-2);
}

.insta-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.insta-item__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: linear-gradient(to top, rgba(23, 38, 56, .92), rgba(23, 38, 56, .55) 55%, rgba(23, 38, 56, .15));
  color: var(--paper);
  font-size: var(--small);
  line-height: 1.5;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

@media (hover: hover) {
  .insta-item:hover img {
    transform: scale(1.05);
  }

  .insta-item:hover .insta-item__caption,
  .insta-item:focus-visible .insta-item__caption {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ search */

.search-page {
  max-width: 820px;
  margin-inline: auto;
}

.search-title {
  font-size: var(--h1-long);
}

.search-form {
  position: relative;
  width: 100%;
  margin-top: 12px;
}

.search-form .icon {
  position: absolute;
  left: 24px;
  top: 50%;
  width: 22px;
  height: 22px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-input {
  width: 100%;
  min-height: 64px;
  padding: 14px 24px 14px 60px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 1.1875rem;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--shadow);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.search-input:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 5px rgba(23, 38, 56, .1);
}

.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-input::placeholder {
  color: #66717c;
}

.search-input::selection {
  background: var(--ink);
  color: var(--paper);
}

.search-notice {
  width: 100%;
  margin-top: 18px;
  color: var(--muted);
  font-size: var(--small);
  text-align: left;
}

.search-notice.is-empty {
  margin-top: 28px;
  font-size: 1rem;
  text-align: center;
}

.search-notice a {
  color: var(--ink);
  text-underline-offset: .2em;
}

.search-results {
  display: grid;
  width: 100%;
  margin-top: 8px;
  text-align: left;
}

.search-result {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  align-items: start;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.search-result:first-child {
  border-top: 1px solid var(--line);
}

.search-result-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-s);
  background: var(--paper-2);
}

.search-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result--product .search-result-image {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.search-result--product .search-result-image img {
  padding: 8%;
  object-fit: contain;
}

.search-result-image--none {
  background: var(--paper-2) url("/favicon.png") center / 44% no-repeat;
}

.search-result-text {
  display: grid;
  gap: 4px;
}

.search-result-kind {
  color: var(--clay);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.search-result-title {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.25;
  transition: color .2s var(--ease);
}

.search-result:hover .search-result-title {
  color: var(--clay-2);
}

.search-result-words {
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.6;
}

.search-results mark {
  border-radius: 3px;
  background: rgba(224, 200, 168, .7);
  color: var(--ink);
}

/* ------------------------------------------------------------------ the not-found page and the old products page */

.notfound {
  display: grid;
  gap: 22px;
  justify-items: center;
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.notfound__code {
  color: var(--clay);
  font-family: var(--serif);
  font-size: clamp(5rem, 3rem + 8vw, 9rem);
  font-style: italic;
  line-height: .9;
}

.notfound__words {
  text-align: left;
}

.tiles {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.tile:hover {
  border-color: transparent;
  box-shadow: var(--shadow);
}

.tile__link {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.3;
  text-decoration: none;
}

.tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tile .icon {
  color: var(--clay);
  transition: transform .25s var(--ease);
}

.tile:hover .icon {
  transform: translateX(4px);
}

/* ------------------------------------------------------------------ Substack and footer */

.substack-section {
  padding-block: 0 clamp(64px, 7vw, 104px);
}

main:has(> :is(.section--tint, .section--ink):last-child) + .substack-section,
main:has(> .page-head:last-child) + .substack-section {
  padding-top: clamp(64px, 7vw, 104px);
}

.substack {
  display: grid;
  gap: 28px 64px;
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--radius-l);
  background: var(--sand);
}

@media (min-width: 960px) {
  .substack {
    grid-template-columns: 1fr 1fr;
  }
}

.substack-header {
  display: grid;
  gap: 10px;
}

/* on sand, the darker clay reads clearly */
.substack .eyebrow {
  color: var(--clay-2);
}

.substack-title {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.875rem);
}

.substack-description {
  color: var(--ink-2);
}

/* the button, and the link to his posts beside it (under it on phones) */
.substack-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}

.substack-button {
  min-height: 56px;
}

.site-footer {
  padding-block: clamp(56px, 7vw, 96px) 32px;
  background: var(--ink);
  color: var(--on-ink-muted);
  font-size: var(--small);
}

.site-footer a {
  color: var(--on-ink);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.site-footer a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: .25em;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 24px;
}

.footer-brand,
.footer-col:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .footer-col:last-child {
    grid-column: auto;
  }
}

@media (min-width: 1000px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: 40px;
  }

  .footer-brand {
    grid-column: auto;
  }
}

.footer-brand {
  display: grid;
  gap: 20px;
  align-content: start;
  justify-items: start;
}

.footer-logo__image {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: invert(1);
  opacity: .92;
}

.footer-address {
  display: grid;
  gap: 2px;
}

.footer-address strong {
  font-weight: inherit;
}

.footer-name {
  margin-bottom: 4px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.375rem;
}

.footer-col h2 {
  margin-bottom: 16px;
  color: var(--on-ink-muted);
  font-family: var(--sans);
  font-size: var(--tiny);
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.footer-col ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col a,
.footer-legal a {
  display: inline-block;
  padding-block: 6px;
}

.footer-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-wrap: anywhere;
}

.footer-contact .icon {
  width: 18px;
  height: 18px;
  color: var(--sand-2);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid rgba(250, 247, 242, .14);
  font-size: var(--tiny);
}

.footer-bottom em {
  font-style: normal;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* ------------------------------------------------------------------ parts Matt removed

  A part Matt removes is left out of the page for visitors (and hidden in Preview); what held it
  closes up around the gap: a question with its answer gone, a detail without its words, a photo's
  column. While he edits, a "Put back" note keeps the part's place. */

:is(html:not(.cms), html.cms-preview) :is(.faq, .service-card__aside):not(:has(> :not([data-cms-removed], .cms-removed))),
:is(html:not(.cms), html.cms-preview) .contact-detail:not(:has([data-edit]:not([data-cms-removed]))) {
  display: none;
}

.service-card:not(:has(.service-card__aside :is([data-edit], [data-edit-list]):not([data-cms-removed]))),
.hero__inner:not(:has(.hero__media:not([data-cms-removed]))),
.page-hero__inner:not(:has(.page-hero__photo:not([data-cms-removed]))),
.split:not(:has(> .frame:not([data-cms-removed]))),
.author-card:not(:has(.author-card__photo:not([data-cms-removed]))) {
  grid-template-columns: 1fr;
}

.hero__inner:not(:has(.hero__media:not([data-cms-removed]))) .hero__text,
.page-hero__inner:not(:has(.page-hero__photo:not([data-cms-removed]))) .page-hero__text {
  max-width: 860px;
}

.rings:not(:has(> .ring:not([data-cms-removed]) ~ .ring:not([data-cms-removed]))) > .ring {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 620px);
}

@media (min-width: 1000px) {
  .contact-layout:not(:has(> .form-card:not([data-cms-removed]))) {
    grid-template-columns: minmax(0, 720px);
    grid-template-areas: "intro" "map";
  }
}

/* ------------------------------------------------------------------ coming into view

  The top of each page rises gently into place as it first shows (data-enter, by itself), and
  sections further down as they come into view (data-reveal: site.js marks them). Nothing moves
  for visitors who prefer less motion; without the page script everything simply shows. */

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-enter] {
    animation: enter .9s var(--ease) both;
  }

  :is(.hero__media, .page-hero__photo, .page-banner, .article-cover, .form-card)[data-enter] {
    animation-delay: .12s;
  }
  .js:not(.no-reveal) [data-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translateY(22px);
  }

  .js [data-reveal] {
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.card, .product-card, .insta-item, .tile, .button, .text-link, .credential, .post-nav a) :is(img, .icon) {
    transition: none !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------------ printing

  On paper: the words, the photos and who wrote them, without the menus, buttons and forms. */

@media print {
  .skip-link,
  .mobile-menu,
  .primary-nav,
  .site-header__actions,
  .hero__actions,
  .page-head__actions,
  .substack-section,
  .share,
  .post-nav,
  .more-articles,
  .cta-band,
  .map-block,
  .code-copy,
  .topics,
  .pagination {
    display: none !important;
  }

  .site-header {
    position: static;
    border: 0;
    box-shadow: none;
    background: none;
  }

  [data-reveal],
  [data-enter] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body,
  .section--tint,
  .section--ink {
    background: #fff !important;
  }

  .section--ink .testimonial blockquote,
  .section--ink .testimonial figcaption {
    color: var(--ink);
  }
}

/* ------------------------------------------------------------------ editing

  While Matt edits: everything shows at once, and words inside a card that opens a page sit above
  the card's link, so clicking them edits them. */

html.cms [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

html.cms [data-enter] {
  animation: none !important;
}

/* the editor's "Add a point" rows, lined up with each list's words */
html.cms ul.ticks > li.cms-add {
  padding: 6px 0 0 36px;
}

html.cms .who-list > li.cms-add {
  grid-column: 1 / -1;
}

/* the phone menu's last links clear the editing bar */
html.cms .mobile-menu__body {
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

html.cms:not(.cms-preview) :is(.card__title, .product-card__title, .tile__link)::after {
  display: none;
}

html.cms:not(.cms-preview) :is(.card, .product-card, .tile) [data-edit] {
  position: relative;
  z-index: 2;
}