/*
 * The New Philosophy — theme styles
 * Built on Penang 1.3.4 (Aspire Themes). Penang's own styles are untouched;
 * everything specific to TNP lives in this file and loads after them.
 */

/* ==========================================================================
   Homepage hero: the line in an oval, with slow drifting words around it
   ========================================================================== */

.tnp-hero {
  position: relative;
  display: flex;
  justify-content: center;
  /* The oval sits towards the bottom; the words fill the space above and beside it */
  align-items: flex-end;
  /* A little shorter than the screen, so the logo bar shows beneath on a laptop.
     72px is the header; 160px leaves room for the logo bar (two rows). */
  min-height: clamp(460px, calc(100vh - 72px - 160px), 780px);
  min-height: clamp(460px, calc(100svh - 72px - 160px), 780px);
  padding: 32px 16px 44px;
  overflow: hidden;
}

.tnp-hero__oval {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(300px, 46vw, 620px);
  aspect-ratio: 16 / 9;
  padding: 4% 7%;
  border-radius: 50%;
  /* A pale wash of the accent colour, so the centre is held without a black outline */
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
  text-align: center;
}

.tnp-hero__line {
  margin: 0;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(24px, 2.6vw, 42px);
  font-weight: 800;
  text-wrap: balance;
  line-height: 1.12;
  letter-spacing: -0.02em;
  /* A deep shade of the accent colour rather than black */
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-hero__words {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tnp-hero__word {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-family: var(--gh-font-body, var(--type-sans-serif));
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 2.4s ease, transform 12s linear;
}

.tnp-hero__word.is-visible {
  opacity: .78;
}

.tnp-hero__word--accent {
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-hero__word--accent.is-visible {
  opacity: 1;
}

/* ==========================================================================
   Logo bar: one tone, even visual weight, directly beneath the hero
   ========================================================================== */

.tnp-logos {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px 40px;
  text-align: center;
}

.tnp-logos__label {
  margin: 0 0 18px;
  font-family: var(--gh-font-body, var(--type-sans-serif));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.tnp-logos__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 40px;
}

/* Before the script tidies the list, keep Ghost's card wrappers out of the way */
.tnp-logos__list figure,
.tnp-logos__list p,
.tnp-logos__list div {
  display: contents;
}

.tnp-logos__list figcaption {
  display: none;
}

.tnp-logos__list img {
  display: block;
  width: auto;
  max-width: 140px;
  max-height: 28px;
  margin: 0;
  /* Step 1 of the one-tone treatment: every logo in greys */
  filter: grayscale(1) brightness(.62) contrast(6);
}

/* Step 2: a layer of charcoal that turns every dark or coloured part of a
   logo into the same charcoal, while white stays white. One calm, neutral
   tone that sets the logos apart from the blue hero above. */
.tnp-logos__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background-color: var(--bg-color);
}

.tnp-logos__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #3a3a3a;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ==========================================================================
   Homepage sections: shared
   ========================================================================== */

.tnp-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 16px;
}

.tnp-section__heading {
  margin: 0 0 12px;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.tnp-section__lead {
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-gray);
}

/* ==========================================================================
   Homepage salons section
   ========================================================================== */

.tnp-salons {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 64px;
  align-items: start;
  border-top: 1px solid var(--color-border);
}

.tnp-salon-card {
  padding: 28px 32px 32px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

.tnp-salon-card__kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-salon-card__title {
  margin: 0 0 6px;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
}

.tnp-salon-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

/* Only the first line of the salon page (its date, time and place) shows here */
.tnp-salon-card__when > * { display: none; }
.tnp-salon-card__when > :first-child {
  display: block;
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.tnp-salon-card__text {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-gray);
}

.tnp-salons__series {
  margin: 18px 0 0;
  font-size: 16px;
}

.tnp-salon-full {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 16px;
  padding: 18px 32px;
  border-radius: 20px;
  background-color: var(--bg-gray);
}

.tnp-salon-full__title {
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
}

.tnp-salon-full__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-text);
  vertical-align: 2px;
}

.tnp-salon-full__link {
  font-size: 15px;
  color: var(--ghost-accent-color, var(--color-brand));
}

/* Testimonials: set in the serif, to feel like voices rather than claims */
.tnp-salons__quotes {
  padding-top: 8px;
}

.tnp-quote {
  margin: 0 0 36px;
}

.tnp-quote__text {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  font-family: var(--type-serif);
  font-size: 20px;
  font-style: normal;
  line-height: 1.45;
  color: var(--color-text);
}

.tnp-quote__text p {
  margin: 0 0 .6em;
  font: inherit;
}

.tnp-quote__text p:first-child::before { content: '\201C'; }
.tnp-quote__text p:last-child::after { content: '\201D'; }

.tnp-quote__name {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray);
}

.tnp-salons__more {
  margin: 28px 0 0;
  font-weight: 600;
}

.tnp-salons__more a,
.tnp-salons__series a {
  color: var(--ghost-accent-color, var(--color-brand));
}

@media (max-width: 859px) {
  .tnp-salons {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 639px) {
  .tnp-section { padding: 56px 16px; }
  .tnp-salon-card { padding: 22px 20px 24px; }
  .tnp-salon-full { padding: 16px 20px; }
  .tnp-quote__text { font-size: 20px; }
}

/* ==========================================================================
   Homepage organisations band: one line and a link, in deep blue
   ========================================================================== */

.tnp-org-band {
  background-color: #0b4d7a;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
  color: #fff;
}

.tnp-org-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 16px;
}

.tnp-org-band__text {
  flex: 1 1 480px;
}

.tnp-org-band__heading {
  margin: 0;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}

.tnp-org-band__lead {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

/* The link from the page body becomes a white button */
.tnp-org-band__action p {
  margin: 0;
}

.tnp-org-band__action a {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 32px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
  background-color: #fff;
  transition: background-color .2s ease;
}

.tnp-org-band__action a:hover {
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

/* ==========================================================================
   Homepage featured writing, with the subscribe box beside it
   ========================================================================== */

.tnp-writing {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    'heading heading'
    'essays  subscribe'
    'more    subscribe';
  grid-template-rows: auto auto 1fr;
  gap: 0 64px;
  align-items: start;
}

.tnp-writing__heading {
  grid-area: heading;
  margin-bottom: 28px;
}

.tnp-essays {
  grid-area: essays;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnp-essay {
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.tnp-essay:last-child {
  border-bottom: 1px solid var(--color-border);
}

.tnp-essay__link {
  display: block;
  padding: 22px 0 24px;
  text-decoration: none;
  color: var(--color-text);
}

.tnp-essay__source {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-essay__source[hidden] {
  display: none;
}

.tnp-essay__title {
  display: block;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color .2s ease;
}

.tnp-essay__link:hover .tnp-essay__title,
.tnp-essay__link:focus-visible .tnp-essay__title {
  color: var(--ghost-accent-color, var(--color-brand));
}

/* The excerpt in the serif, as in the essays themselves */
.tnp-essay__excerpt {
  display: block;
  margin-top: 6px;
  font-family: var(--type-serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-gray);
}

.tnp-writing__more {
  grid-area: more;
  margin: 24px 0 0;
  font-weight: 600;
}

.tnp-writing__more a {
  color: var(--ghost-accent-color, var(--color-brand));
}

/* The subscribe box: the pale blue of the hero oval */
.tnp-subscribe {
  grid-area: subscribe;
  padding: 32px 32px 36px;
  border-radius: 20px;
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

.tnp-subscribe__text {
  margin: 0 0 22px;
  font-family: var(--type-serif);
  font-size: 22px;
  line-height: 1.4;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-subscribe .c-subscribe-form__input[type='email'] {
  background-color: #fff;
}

.tnp-subscribe .c-subscribe-form__btn {
  flex: 0 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  background-color: #0b4d7a;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-subscribe__thanks {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

/* Tablets and phones: heading, essays, "All writing", then the subscribe box */
@media (max-width: 859px) {
  .tnp-writing {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'heading'
      'essays'
      'more'
      'subscribe';
    grid-template-rows: none;
  }

  .tnp-subscribe {
    margin-top: 36px;
  }
}

@media (max-width: 639px) {
  .tnp-subscribe { padding: 24px 20px 28px; }
  .tnp-subscribe__text { font-size: 20px; }
  .tnp-essay__excerpt { font-size: 19px; }
}

/* ==========================================================================
   Single salon page (custom-single-salon.hbs): one salon, with booking by email
   ========================================================================== */

.tnp-salon {
  max-width: 752px;
  margin: 0 auto;
  padding: 64px 16px 80px;
}

.tnp-salon__kicker {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-salon__title {
  margin: 0;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.tnp-salon__lead {
  margin: 16px 0 0;
  font-size: 21px;
  line-height: 1.5;
  color: var(--color-gray);
}

.tnp-salon__body {
  margin-top: 32px;
}

/* The first line of the page is its date, time and place */
.tnp-salon__body > :first-child {
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--gh-font-body, var(--type-sans-serif));
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}

/* The booking box: the pale blue of the hero oval */
.tnp-booking {
  margin-top: 48px;
  padding: 32px 32px 30px;
  border-radius: 20px;
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

.tnp-booking__btn {
  display: inline-block;
  padding: 16px 30px;
  border-radius: 32px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background-color: #0b4d7a;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
  transition: background-color .2s ease;
}

.tnp-booking__btn:hover,
.tnp-booking__btn:focus-visible {
  color: #fff;
  background-color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-booking {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.tnp-booking__note {
  flex: 1 1 260px;
  margin: 0;
  font-family: var(--type-serif);
  font-size: 20px;
  line-height: 1.4;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-salon__more {
  margin: 32px 0 0;
  font-weight: 600;
}

.tnp-salon__more a {
  color: var(--ghost-accent-color, var(--color-brand));
}

@media (max-width: 639px) {
  .tnp-salon { padding: 40px 16px 56px; }
  .tnp-booking { padding: 24px 20px; }
  .tnp-booking { flex-direction: column; align-items: stretch; }
  .tnp-booking__note { flex: none; }
  .tnp-booking__btn { display: block; text-align: center; }
}

/* ==========================================================================
   Salons page (custom-salons.hbs)
   ========================================================================== */

.tnp-page-head {
  padding-bottom: 8px;
}

.tnp-page-head__title {
  margin: 0;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.tnp-page-head__lead {
  max-width: 720px;
  margin: 16px 0 0;
  font-family: var(--type-serif);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.35;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-upcoming {
  padding-top: 48px;
}

.tnp-upcoming .tnp-section__lead {
  max-width: 720px;
}

.tnp-upcoming__cards {
  max-width: 720px;
}

/* Testimonials in two balanced columns on a laptop */
.tnp-voices {
  border-top: 1px solid var(--color-border);
}

.tnp-voices .tnp-section__heading {
  margin-bottom: 32px;
}

.tnp-voices__list {
  columns: 2 320px;
  column-gap: 64px;
}

.tnp-voices__list .tnp-quote {
  break-inside: avoid;
  margin-bottom: 40px;
}

/* Pranay's own text: a comfortable reading column */
.tnp-page-text {
  border-top: 1px solid var(--color-border);
}

.tnp-page-text__body {
  max-width: 720px;
  align-items: flex-start;
}

.tnp-page-text__body h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

@media (max-width: 639px) {
  .tnp-upcoming { padding-top: 32px; }
}

/* ==========================================================================
   Organisations page (custom-organisations.hbs)
   ========================================================================== */

.tnp-page-head__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-org-page .tnp-page-head__title {
  max-width: 900px;
  font-size: clamp(38px, 5vw, 64px);
}

.tnp-org-page .tnp-logos {
  padding-top: 40px;
  padding-bottom: 48px;
}

/* One testimonial on its own reads as a large pull quote; several sit in two columns */
.tnp-voices__list:has(> .tnp-quote:only-child) {
  columns: auto;
  max-width: 860px;
}

.tnp-voices__list > .tnp-quote:only-child .tnp-quote__text {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
}

.tnp-voices__list > .tnp-quote:only-child {
  margin-bottom: 0;
}

/* Start a conversation: a quiet invitation with one button */
.tnp-contact {
  padding-top: 24px;
}

.tnp-contact__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 48px;
  padding: 36px 40px;
  border-radius: 20px;
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

.tnp-contact__text {
  flex: 1 1 420px;
}

.tnp-contact__heading {
  margin: 0;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text);
}

.tnp-contact__lead {
  margin: 10px 0 0;
  font-family: var(--type-serif);
  font-size: 20px;
  line-height: 1.45;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

@media (max-width: 639px) {
  .tnp-contact__box { flex-direction: column; align-items: stretch; padding: 24px 20px; }
  .tnp-contact__text { flex: none; }
  .tnp-contact .tnp-booking__btn { display: block; width: 100%; text-align: center; }
}

/* Phones: a taller, narrower oval with words above and below */
@media (max-width: 639px) {
  .tnp-hero {
    min-height: clamp(460px, calc(100vh - 72px - 90px), 680px);
    min-height: clamp(460px, calc(100svh - 72px - 90px), 680px);
  }

  .tnp-hero__oval {
    width: min(86vw, 360px);
    aspect-ratio: 3 / 2;
    padding: 8% 12%;
  }

  .tnp-hero__line {
    font-size: 26px;
  }

  .tnp-logos__list {
    gap: 18px 28px;
  }
}

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

/* ==========================================================================
   About page (custom-about.hbs)
   ========================================================================== */

/* Photo in a narrow column on the left; it stays in view while the text is read */
.tnp-about--photo {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 720px);
  gap: 0 64px;
  align-items: start;
}

.tnp-about__photo {
  position: sticky;
  top: 96px;
}

.tnp-about__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.tnp-about__main {
  max-width: 720px;
}

.tnp-about__head {
  margin-bottom: 40px;
}

.tnp-about .tnp-about__title {
  font-size: clamp(40px, 5vw, 60px);
}

/* Pranay's text: the reading column, with the three part headings */
.tnp-about__body {
  align-items: flex-start;
}

.tnp-about__body > h2 {
  margin-top: 56px;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.tnp-about__body > h2:first-child {
  margin-top: 0;
}

/* Quotes in the text (e.g. Geoff Dyer): a quiet pull quote in the serif */
.tnp-about__body > blockquote,
.tnp-about__body > .kg-blockquote-alt {
  padding: 4px 0 4px 24px;
  border: 0;
  border-left: 3px solid var(--ghost-accent-color, var(--color-brand));
  box-shadow: none;
  font-family: var(--type-serif);
  font-size: 24px;
  font-style: italic;
  line-height: 1.4;
  text-align: left;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

/* The vision (the last part): set apart in the pale blue of the hero oval.
   Each block in it carries the colour, so the part reads as one box. */
.tnp-about__body > h2:last-of-type:not(:first-of-type),
.tnp-about__body > h2:last-of-type:not(:first-of-type) ~ * {
  margin-top: 0;
  padding: 28px 40px 0;
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

.tnp-about__body > h2:last-of-type:not(:first-of-type) {
  margin-top: 56px;
  padding-top: 36px;
  border-radius: 20px 20px 0 0;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-about__body > h2:last-of-type:not(:first-of-type) ~ :last-child {
  padding-bottom: 40px;
  border-radius: 0 0 20px 20px;
}

/* Closing: the subscribe line and Ghost's own sign-up form */
.tnp-about__subscribe {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.tnp-about__subscribe-text {
  margin: 0 0 18px;
  font-family: var(--type-serif);
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-text);
}

.tnp-about__subscribe .c-subscribe-form__btn {
  flex: 0 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  background-color: #0b4d7a;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

/* Tablets and phones: the photo above the text, smaller */
@media (max-width: 859px) {
  .tnp-about--photo {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnp-about__photo {
    position: static;
    width: 240px;
    margin-bottom: 32px;
  }
}

@media (max-width: 639px) {
  .tnp-about__photo { width: 200px; }
  .tnp-about__body > h2:last-of-type:not(:first-of-type),
  .tnp-about__body > h2:last-of-type:not(:first-of-type) ~ * {
    padding-left: 20px;
    padding-right: 20px;
  }
  .tnp-about__body > blockquote,
  .tnp-about__body > .kg-blockquote-alt { font-size: 21px; }
}

/* ==========================================================================
   Writing page (blog.hbs): theme map, essays, subscribe box
   ========================================================================== */

.tnp-wp-head {
  padding-bottom: 0;
}

/* "Search essays": opens Ghost's own search */
.tnp-wp-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 420px);
  margin-top: 28px;
  padding: 13px 20px;
  border: 1px solid var(--color-border);
  border-radius: 32px;
  font: inherit;
  font-size: 16px;
  text-align: left;
  color: var(--color-gray);
  background-color: var(--bg-color);
  cursor: pointer;
  transition: border-color .2s ease;
}

.tnp-wp-search:hover,
.tnp-wp-search:focus-visible {
  border-color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-wp-search__icon {
  flex: 0 0 auto;
}

/* The theme map: words sized by how often they are used, floating gently in place */
.tnp-themes {
  padding-top: 40px;
  padding-bottom: 40px;
}

.tnp-themes__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 30px;
  margin: 0;
  padding: 44px 40px;
  list-style: none;
  border-radius: 28px;
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

.tnp-themes__item {
  margin: 0;
  font-size: var(--tnp-theme-size, 20px);
  line-height: 1.2;
}

.tnp-themes__item.is-floating {
  animation: tnp-theme-float var(--tnp-float-time, 9s) ease-in-out var(--tnp-float-delay, 0s) infinite alternate;
}

@keyframes tnp-theme-float {
  from { transform: translate(0, -3px); }
  to   { transform: translate(var(--tnp-float-x, 2px), 3px); }
}

.tnp-themes__word {
  display: inline-block;
  padding: 2px 12px 4px;
  border-radius: 24px;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--color-text);
  transition: color .2s ease, background-color .2s ease;
}

.tnp-themes__item--accent .tnp-themes__word {
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-themes__word:hover,
.tnp-themes__word:focus-visible {
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-themes__word.is-active,
.tnp-themes__word.is-active:hover {
  color: #fff;
  background-color: #0b4d7a;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

/* Essays on the left, the subscribe box beside them (it stays in view on a laptop) */
.tnp-wp-main {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 64px;
  align-items: start;
  padding-top: 8px;
}

.tnp-wp-aside {
  position: sticky;
  top: 96px;
}

.tnp-wp-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 0 0 18px;
  font-size: 17px;
  color: var(--color-gray);
}

.tnp-wp-status strong {
  color: var(--color-text);
}

.tnp-wp-status__reset {
  padding: 0;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ghost-accent-color, var(--color-brand));
  background: none;
  cursor: pointer;
}

.tnp-wp-list .tnp-essay[hidden] {
  display: none;
}

@media (max-width: 859px) {
  .tnp-wp-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnp-wp-aside {
    position: static;
    margin-top: 40px;
  }
}

@media (max-width: 639px) {
  .tnp-themes { padding-top: 28px; padding-bottom: 28px; }
  .tnp-themes__list { gap: 4px 8px; padding: 22px 12px; }
  .tnp-themes__item { font-size: calc(var(--tnp-theme-size, 20px) * .68); }
  .tnp-themes__word { padding: 2px 8px 3px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .tnp-themes__item.is-floating { animation: none; }
}

/* ==========================================================================
   Footer (partials/footer.hbs): name and line, links from the secondary navigation
   ========================================================================== */

.tnp-footer {
  margin-top: 0;
  padding: 56px 0 28px;
  border-top: 1px solid var(--color-border);
  background-color: var(--bg-gray);
}

.tnp-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px 64px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.tnp-footer__brand {
  flex: 1 1 280px;
  max-width: 440px;
}

.tnp-footer__name {
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--color-text);
}

.tnp-footer__line {
  margin: 8px 0 0;
  font-family: var(--type-serif);
  font-size: 19px;
  line-height: 1.4;
  color: var(--color-gray);
}

.tnp-footer__nav {
  flex: 0 1 auto;
}

/* A short list: what the top menu doesn't carry (For organisations), and how to reach Pranay */
.tnp-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnp-footer__links .c-nav__item {
  display: block;
  margin: 0;
  padding: 0;
}

.tnp-footer__links .c-nav__link {
  display: inline-block;
  padding: 5px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  color: var(--color-text);
  transition: color .2s ease;
}

.tnp-footer__links .c-nav__link:hover,
.tnp-footer__links .c-nav__link:focus-visible {
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-footer__links .c-nav__link--current {
  color: var(--color-text);
}

.tnp-footer__bottom {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 20px 16px 0;
  border-top: 1px solid var(--color-border);
}

.tnp-footer__bottom p {
  margin: 0;
  font-size: 14px;
  color: var(--color-gray);
}

@media (max-width: 639px) {
  .tnp-footer { padding-top: 44px; }
  .tnp-footer__line { font-size: 18px; }
}

/* ==========================================================================
   Homepage "Also coming up" (partials/tnp-events.hbs): one row across the bottom of the
   salons section, up to three events side by side, so it never grows taller
   ========================================================================== */

.tnp-events {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.tnp-events[hidden] {
  display: none;
}

.tnp-events__heading {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.tnp-events__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnp-event {
  margin: 0;
  padding: 0;
}

.tnp-event__when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-event__title {
  margin: 0;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.tnp-event__title a {
  color: var(--color-text);
  text-decoration: none;
}

.tnp-event__title a:hover,
.tnp-event__title a:focus-visible {
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-event__badge {
  display: inline-block;
  margin: 0;
  padding: 1px 9px;
  border-radius: 20px;
  font-family: var(--gh-font-body, var(--type-sans-serif));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-gray);
  background-color: var(--bg-gray);
  vertical-align: 1px;
}

/* The optional short line: kept to two lines so the row stays short */
.tnp-event__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 0;
  font-family: var(--type-serif);
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-gray);
}

@media (max-width: 859px) {
  .tnp-events__list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Workshops page (custom-workshops.hbs): the map of workshops, the facts line
   and the closing box with Pranay's photo
   ========================================================================== */

.tnp-workshops-body .tnp-page-text__body {
  max-width: 1068px;
}

.tnp-workshops-page .tnp-page-head__title {
  text-wrap: balance;
}

.tnp-workshops-body .tnp-page-text__body > :not(.tnp-wmap):not(.tnp-wlist) {
  max-width: 720px;
}

/* The facts line under "How it works" (the first paragraph after the second heading):
   set off between rules, like the date line on a salon page */
.tnp-workshops-body .tnp-page-text__body h2 ~ h2 + p {
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--gh-font-body, var(--type-sans-serif));
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}

/* The workshops as a list: what phones see, and what everyone sees without the script */
.tnp-page-text__body .tnp-wlist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.c-content .tnp-wlist:not(:root:root) {
  padding: 0;
  -webkit-padding-start: 0;
  padding-inline-start: 0;
}

.tnp-wlist,
.tnp-wmap {
  font-family: var(--gh-font-body, var(--type-sans-serif));
}

.tnp-page-text__body .tnp-wlist > li {
  margin: 0;
  list-style: none;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.tnp-page-text__body .tnp-wlist > li:first-child {
  margin-bottom: 8px;
  padding: 22px 24px;
  border: 0;
  border-radius: 20px;
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

.tnp-wlist a {
  display: block;
  text-decoration: none;
}

.tnp-w__start {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-w__name {
  display: block;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

.tnp-wlist > li:first-child .tnp-w__name {
  font-size: 26px;
  font-weight: 800;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-w__sub {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-gray);
}

.tnp-w__sub::first-letter { text-transform: uppercase; }

.tnp-wlist a .tnp-w__name::after {
  content: ' \2192';
  color: var(--ghost-accent-color, var(--color-brand));
}

/* The map: Future-proof in an oval at the centre, the other workshops around it */
.tnp-wmap {
  display: none;
  position: relative;
  height: 540px;
  margin: 24px 0 8px;
}

.tnp-wmap__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tnp-wmap__lines line {
  stroke: #b9dcf5;
  stroke: color-mix(in srgb, var(--ghost-accent-color, #138edf) 30%, #fff);
  stroke-width: 1.5;
}

.tnp-wmap__centre {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 360px;
  height: 200px;
  padding: 0 48px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease;
}

.tnp-wmap__centre .tnp-w__name {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-wmap__centre .tnp-w__sub {
  margin-top: 6px;
  font-size: 16px;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

a.tnp-wmap__centre:hover,
a.tnp-wmap__centre:focus-visible {
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 18%, #fff);
}

.tnp-wmap__node {
  position: absolute;
  z-index: 1;
  width: max-content;
  max-width: 260px;
  padding: 12px 20px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  transform: translate(-50%, -50%);
  background-color: var(--bg-color, #fff);
  text-align: center;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}

.tnp-wmap__node .tnp-w__name {
  font-size: 17px;
  font-weight: 700;
}

.tnp-wmap__node .tnp-w__sub {
  font-size: 14px;
}

a.tnp-wmap__node:hover,
a.tnp-wmap__node:focus-visible {
  border-color: #0b4d7a;
  border-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

/* On a laptop the map replaces the list; on a phone the list stays */
@media (min-width: 860px) {
  .tnp-wmap.is-ready { display: block; }
  .tnp-wmap.is-ready + .tnp-wlist { display: none; }
}

/* Closing box: Pranay's photo, a few lines, and one button */
.tnp-wclose {
  padding-top: 24px;
}

.tnp-wclose__box {
  display: flex;
  align-items: center;
  gap: 24px 40px;
  padding: 36px 40px;
  border-radius: 20px;
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

.tnp-wclose__photo {
  flex: none;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
}

.tnp-wclose__text {
  flex: 1 1 auto;
  font-family: var(--type-serif);
  font-size: 20px;
  line-height: 1.45;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-wclose__text p {
  margin: 0 0 .5em;
  font: inherit;
}

.tnp-wclose__text p:last-child { margin-bottom: 0; }

.tnp-wclose .tnp-booking__btn {
  flex: none;
}

@media (max-width: 859px) {
  .tnp-wclose__box { flex-wrap: wrap; }
}

@media (max-width: 639px) {
  .tnp-wclose__box { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .tnp-wclose__photo { width: 96px; height: 96px; }
  .tnp-wclose .tnp-booking__btn { display: block; width: 100%; text-align: center; }
}

/* ==========================================================================
   Single workshop page (custom-single-workshop.hbs): one workshop, with the
   takeaways set out as the heart of the page and the same close as the overview
   ========================================================================== */

.tnp-wpage__article {
  max-width: 752px;
  margin: 0 auto;
  padding: 64px 16px 80px;
}

.tnp-wpage__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-wpage__title {
  margin: 0;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--color-text);
}

/* Text after a colon in the title: a smaller second line, as on the map */
.tnp-wpage__name,
.tnp-wpage__sub {
  display: block;
}

.tnp-wpage__sub {
  margin-top: 10px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-gray);
}

/* The one-line promise (the excerpt), in the serif, as on the other pages */
.tnp-wpage__lead {
  margin: 20px 0 0;
  font-family: var(--type-serif);
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.35;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-wpage__body {
  margin-top: 32px;
}

/* The first line of the body is the facts line, set between rules like a salon's date line */
.tnp-wpage__body > :first-child {
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--gh-font-body, var(--type-sans-serif));
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}

.tnp-wpage__body h2 {
  margin-top: 48px;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* What your team walks away with: the first bulleted list in the body.
   Each point on its own line between hairlines, with a small deep-blue tick. */
.tnp-wpage__body > ul:first-of-type:not(:root:root) {
  list-style: none;
  margin-left: 0;
  padding: 0;
  -webkit-padding-start: 0;
  padding-inline-start: 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--gh-font-body, var(--type-sans-serif));
}

.tnp-wpage__body > ul:first-of-type > li:not(:root:root) {
  position: relative;
  margin: 0;
  padding: 16px 0 16px 44px;
  border-bottom: 1px solid var(--color-border);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
}

.tnp-wpage__body > ul:first-of-type > li::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

.tnp-wpage__body > ul:first-of-type > li::after {
  content: '';
  position: absolute;
  top: 25px;
  left: 9px;
  width: 8px;
  height: 12px;
  border-right: 2.5px solid #0b4d7a;
  border-bottom: 2.5px solid #0b4d7a;
  border-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
  transform: rotate(45deg);
}

/* The close sits inside the reading column: photo and lines side by side, the button under the lines */
.tnp-wpage .tnp-wclose {
  max-width: none;
  padding: 56px 0 0;
}

.tnp-wpage .tnp-wclose__box {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 20px 32px;
}

.tnp-wpage .tnp-wclose__photo {
  grid-row: span 2;
  width: 112px;
  height: 112px;
}

.tnp-wpage .tnp-wclose .tnp-booking__btn {
  grid-column: 2;
  justify-self: start;
}

.tnp-wpage__more {
  margin: 32px 0 0;
  font-weight: 600;
}

.tnp-wpage__more a {
  color: var(--ghost-accent-color, var(--color-brand));
  text-decoration: none;
}

@media (max-width: 639px) {
  .tnp-wpage__article { padding: 40px 16px 56px; }
  .tnp-wpage__body > ul:first-of-type > li:not(:root:root) { font-size: 18px; }
  .tnp-wpage .tnp-wclose { padding-top: 40px; }
  .tnp-wpage .tnp-wclose__box { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .tnp-wpage .tnp-wclose__photo { width: 96px; height: 96px; }
  .tnp-wpage .tnp-wclose .tnp-booking__btn { display: block; width: 100%; text-align: center; }
}

/* ==========================================================================
   Under each essay (partials/related-posts.hbs) and on the page-not-found page
   (error-404.hbs): essays as text, title and excerpt, as on the homepage
   ========================================================================== */

.tnp-related {
  max-width: 752px;
  padding-top: 56px;
}

.tnp-related__heading {
  margin-bottom: 20px;
  font-size: clamp(24px, 2.4vw, 30px);
}

/* Under an essay: the same width as the essay's own column */
.post-template .tnp-related {
  max-width: 682px;
}

.tnp-related .tnp-writing__more {
  margin-top: 20px;
}

/* Page not found: a short line and the menu's pages as quiet buttons */
.tnp-notfound {
  max-width: 752px;
  padding-bottom: 8px;
}

.tnp-notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.tnp-notfound__links .c-nav__item {
  margin: 0;
}

.tnp-notfound__links .c-nav__link {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color .2s ease, color .2s ease;
}

.tnp-notfound__links .c-nav__link:hover,
.tnp-notfound__links .c-nav__link:focus-visible {
  border-color: var(--ghost-accent-color, var(--color-brand));
  color: var(--ghost-accent-color, var(--color-brand));
}

@media (max-width: 639px) {
  .tnp-related { padding-top: 40px; }
}

/* ==========================================================================
   Salon landing page for organisations (custom-organisations.hbs, v0.30):
   one reading column, like the salon and workshop pages. The top carries the
   facts line and the Book a salon button; the steps of a salon are numbered;
   Setting it up is set out as rows; the close holds the photo, a few lines,
   the button, and the logos underneath.
   ========================================================================== */

.tnp-opage__article {
  max-width: 752px;
  margin: 0 auto;
  padding: 64px 16px 80px;
}

.tnp-opage__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ghost-accent-color, var(--color-brand));
}

.tnp-opage__title {
  margin: 0;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--color-text);
}

/* The line under the title (the excerpt), in the serif, as on the other pages */
.tnp-opage__lead {
  margin: 20px 0 0;
  font-family: var(--type-serif);
  font-size: clamp(21px, 2.1vw, 25px);
  line-height: 1.4;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

/* The facts line: the body's first line, moved up here by the page's script.
   Without the script it stays at the start of the body, looking the same. */
.tnp-opage__facts > p,
.tnp-opage__body > p:first-child {
  margin: 28px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--gh-font-body, var(--type-sans-serif));
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}

.tnp-opage__book {
  margin: 28px 0 0;
}

/* What people say: right under the top, before the story */
.tnp-opage__voices {
  margin-top: 64px;
}

.tnp-opage__label {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.tnp-opage__voices .tnp-voices__list:has(> .tnp-quote:only-child) {
  max-width: none;
}

.tnp-opage__voices .tnp-voices__list > .tnp-quote:only-child .tnp-quote__text {
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.45;
}

/* Pranay's text: the reading column, with its part headings */
.tnp-opage__body {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--color-border);
}

.tnp-opage__body h2 {
  margin-top: 64px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* How a salon works: the first numbered list, as four steps between hairlines,
   each with its number in a small pale-blue circle. A bold name at the start of
   a step sits on its own line. */
.tnp-opage__body > ol:not(:root:root) {
  counter-reset: tnp-step;
  list-style: none;
  margin-left: 0;
  padding: 0;
  -webkit-padding-start: 0;
  padding-inline-start: 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--gh-font-body, var(--type-sans-serif));
}

.tnp-opage__body > ol > li:not(:root:root) {
  counter-increment: tnp-step;
  position: relative;
  margin: 0;
  padding: 18px 0 18px 56px;
  border-bottom: 1px solid var(--color-border);
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-text);
}

.tnp-opage__body > ol > li::before {
  content: counter(tnp-step);
  position: absolute;
  top: 17px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

.tnp-opage__body > ol > li > strong:first-child {
  display: block;
  margin-bottom: 2px;
  font-size: 19px;
  font-weight: 700;
}

/* Setting it up: the bulleted list as rows between hairlines, in the sans,
   so the practical details are easy to scan */
.tnp-opage__body > ul:not(:root:root) {
  list-style: none;
  margin-left: 0;
  padding: 0;
  -webkit-padding-start: 0;
  padding-inline-start: 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--gh-font-body, var(--type-sans-serif));
}

.tnp-opage__body > ul > li:not(:root:root) {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-text);
}

.tnp-opage__body > ul > li > strong:first-child {
  font-weight: 700;
}

/* The close: photo beside a few lines, the button under the lines, all in the
   pale blue of the hero oval; the logos sit beneath it on white */
.tnp-opage__close {
  margin-top: 72px;
}

.tnp-opage__closebox {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 20px 32px;
  padding: 36px 40px;
  border-radius: 20px;
  background-color: #e8f3fc;
  background-color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 10%, #fff);
}

.tnp-opage__photo {
  grid-row: span 2;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
}

.tnp-opage__closetext {
  font-family: var(--type-serif);
  font-size: 20px;
  line-height: 1.45;
  color: #0b4d7a;
  color: color-mix(in srgb, var(--ghost-accent-color, #138edf) 55%, #000);
}

.tnp-opage__closetext p {
  margin: 0 0 .5em;
  font: inherit;
}

.tnp-opage__closetext p:last-child { margin-bottom: 0; }

.tnp-opage__closebox .tnp-booking__btn {
  grid-column: 2;
  justify-self: start;
}

.tnp-opage__logos {
  max-width: none;
  padding: 36px 0 0;
}

.tnp-opage__logos .tnp-logos__label {
  margin-bottom: 16px;
}

.tnp-opage__logos .tnp-logos__list {
  gap: 16px 32px;
}

.tnp-opage__logos .tnp-logos__list img {
  max-width: 105px;
  max-height: 21px;
}

@media (max-width: 639px) {
  .tnp-opage__article { padding: 40px 16px 56px; }
  .tnp-opage__book .tnp-booking__btn { display: block; text-align: center; }
  .tnp-opage__voices { margin-top: 48px; }
  .tnp-opage__body { margin-top: 48px; padding-top: 40px; }
  .tnp-opage__body h2 { margin-top: 48px; }
  .tnp-opage__body > ol > li:not(:root:root) { padding-left: 48px; font-size: 17px; }
  .tnp-opage__body > ul > li:not(:root:root) { font-size: 17px; }
  .tnp-opage__close { margin-top: 56px; }
  .tnp-opage__closebox { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .tnp-opage__photo { width: 96px; height: 96px; }
  .tnp-opage__closebox .tnp-booking__btn { display: block; width: 100%; text-align: center; }
  .tnp-opage__logos .tnp-logos__list { gap: 14px 24px; }
}

/* ==========================================================================
   Salons page fork (custom-salons.hbs, v0.32): two equal routes under the
   title. Come to a salon (individuals) beside A salon for your executives
   (organisations), side by side on a laptop, one after the other on a phone.
   ========================================================================== */

.tnp-fork {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 48px;
  align-items: start;
  padding-top: 48px;
}

.tnp-fork__heading {
  margin: 0 0 20px;
  font-family: var(--gh-font-heading, var(--type-sans-serif));
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.tnp-fork .tnp-upcoming__cards {
  max-width: none;
}

.tnp-fork__org .tnp-salon-card__text {
  margin-top: 4px;
}

@media (max-width: 859px) {
  .tnp-fork { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .tnp-fork { padding-top: 32px; gap: 40px; }
}