/* Parent Guides — calm reading layer on top of the site's existing tokens.
   Loaded only on /blog and article pages. Colour tokens come from styles.css. */

:root {
  /* Berry darkened to #c2166b so accent text on ivory/white clears WCAG AA (5.8:1). */
  --tmb-accent: #c2166b;
  --tmb-link: #2e1a6e;
  --tmb-text: var(--color-charcoal);
  --tmb-head: var(--color-cocoa);
  --tmb-line: var(--color-sand);
  --tmb-measure: 44rem; /* ~700px article measure */
}

.tmb {
  background: var(--color-ivory);
}

.tmb-shell {
  margin: 0 auto;
  width: 100%;
  max-width: 72rem;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .tmb-shell {
    padding: 0 1.5rem;
  }
}

.tmb-measure {
  margin: 0 auto;
  width: 100%;
  max-width: var(--tmb-measure);
}

/* ---------- Header ---------- */

.tmb-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--tmb-line);
  background: color-mix(in srgb, var(--color-ivory) 92%, transparent);
  backdrop-filter: blur(8px);
}

.tmb-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

/* flex:none — without it the logo is the only shrinkable item in the header row and
   gets squashed horizontally at 320/390px instead of letting the nav wrap. */
.tmb-logo {
  flex: none;
}

.tmb-logo img {
  display: block;
  height: 3.25rem;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (min-width: 640px) {
  .tmb-logo img {
    height: 4rem;
  }
}

.tmb-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.tmb-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-cocoa) 22%, transparent);
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tmb-head);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.tmb-nav a:hover {
  background: var(--color-sky-soft);
}

/* Current page is marked by weight + underline as well as colour, so the state is
   never carried by colour alone. */
.tmb-nav a[aria-current="page"] {
  border-color: var(--tmb-accent);
  color: var(--tmb-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Leaf (#16a34a) gives only 3.3:1 against white; #0f7a37 reaches 5.4:1. */
.tmb-nav .tmb-nav-wa {
  border-color: #0f7a37;
  background: #0f7a37;
  color: #fff;
}

.tmb-nav .tmb-nav-wa:hover {
  background: #0c6a2f;
}

.tmb-nav svg {
  height: 1rem;
  width: 1rem;
  flex: none;
}

@media (max-width: 400px) {
  .tmb-nav .tmb-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

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

.tmb main {
  padding-bottom: 3.5rem;
}

.tmb h1,
.tmb h2,
.tmb h3 {
  font-family: var(--font-serif);
  color: var(--tmb-head);
  line-height: 1.25;
  text-wrap: balance;
}

.tmb-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tmb-accent);
}

.tmb-meta {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-charcoal) 85%, transparent);
}

.tmb-dot {
  padding: 0 0.45rem;
  color: color-mix(in srgb, var(--color-charcoal) 80%, transparent);
}

/* ---------- Landing intro ---------- */

.tmb-intro {
  border-bottom: 1px solid var(--tmb-line);
  padding-top: 2.25rem;
  padding-bottom: 2rem;
}

.tmb-intro h1 {
  margin-top: 0.6rem;
  font-size: 1.85rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .tmb-intro h1 {
    font-size: 2.35rem;
  }
}

.tmb-intro p {
  margin-top: 0.85rem;
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tmb-text);
}

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

.tmb-section {
  padding-top: 2.5rem;
}

.tmb-section > h2 {
  font-size: 1.35rem;
  font-weight: 600;
}

.tmb-section > p.tmb-section-note {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  color: var(--tmb-text);
}

/* ---------- Featured card ---------- */

.tmb-featured {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
  align-items: center;
  border: 1px solid var(--tmb-line);
  border-radius: 1.25rem;
  background: #fff;
  padding: 1rem;
}

@media (min-width: 768px) {
  .tmb-featured {
    grid-template-columns: 1.05fr 1fr;
    gap: 2rem;
    padding: 1.25rem;
  }
}

.tmb-featured figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0.9rem;
  background: var(--color-sky-soft);
}

/* Article covers carry the article title inside the artwork, so they are never
   cropped: the box takes the image's own 3:2 ratio and the image fills it exactly. */
.tmb-featured img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
}

.tmb-featured h3 {
  margin-top: 0.55rem;
  font-size: 1.4rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .tmb-featured h3 {
    font-size: 1.6rem;
  }
}

.tmb-featured p {
  margin-top: 0.6rem;
  line-height: 1.6;
  color: var(--tmb-text);
}

.tmb-featured .tmb-meta {
  margin-top: 0.75rem;
}

/* ---------- Chip navigation ---------- */

.tmb-chips {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.tmb-chips a {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--tmb-line);
  background: #fff;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tmb-head);
  text-decoration: none;
}

.tmb-chips a:hover {
  border-color: var(--tmb-accent);
  color: var(--tmb-accent);
}

.tmb-chips .tmb-count {
  font-weight: 500;
  color: color-mix(in srgb, var(--color-charcoal) 75%, transparent);
}

/* ---------- Grouped / latest lists ---------- */

.tmb-group {
  margin-top: 2rem;
  scroll-margin-top: 6rem;
}

.tmb-group > h3 {
  font-size: 1.05rem;
  font-weight: 600;
  border-bottom: 1px solid var(--tmb-line);
  padding-bottom: 0.5rem;
}

.tmb-cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

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

@media (min-width: 1024px) {
  .tmb-cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tmb-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--tmb-line);
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
}

.tmb-card h4 {
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.075rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tmb-head);
}

.tmb-card p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tmb-text);
}

.tmb-card .tmb-meta {
  margin-top: auto;
  padding-top: 0.85rem;
}

.tmb-card-link {
  color: inherit;
  text-decoration: none;
}

.tmb-card-link:hover h4,
.tmb-featured a:hover h3 {
  color: var(--tmb-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ivory rather than sky-soft: the covers have an ivory field, so any letterboxing
   from a rounding difference stays invisible instead of showing a blue band. */
.tmb-card-thumb {
  margin: -1rem -1rem 0.75rem;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
  background: var(--color-ivory);
}

.tmb-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
}

/* ---------- Conversion callout ---------- */

.tmb-cta {
  margin-top: 3rem;
  border: 1px solid var(--tmb-line);
  border-left: 4px solid var(--color-sun);
  border-radius: 1rem;
  background: var(--color-sun-soft);
  padding: 1.4rem;
}

.tmb-cta h2,
.tmb-cta h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.tmb-cta p {
  margin-top: 0.5rem;
  max-width: 34rem;
  line-height: 1.6;
  color: var(--tmb-text);
}

.tmb-cta-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.tmb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.7rem 1.15rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

/* Coral (#e6197f) gives 4.4:1 against white, just under AA at this button's text
   size; the darkened berry reaches 5.8:1. */
.tmb-btn-primary {
  background: var(--tmb-accent);
  color: #fff;
}

.tmb-btn-primary:hover {
  background: #a3125a;
}

.tmb-btn-secondary {
  border-color: color-mix(in srgb, var(--color-cocoa) 25%, transparent);
  background: #fff;
  color: var(--tmb-head);
}

.tmb-btn-secondary:hover {
  background: var(--color-leaf-soft);
}

/* ---------- Article ---------- */

.tmb-breadcrumb {
  padding-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--tmb-text);
}

.tmb-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tmb-breadcrumb a {
  color: var(--tmb-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tmb-breadcrumb [aria-current="page"] {
  color: color-mix(in srgb, var(--color-charcoal) 80%, transparent);
}

.tmb-breadcrumb svg {
  height: 0.7rem;
  width: 0.7rem;
  flex: none;
  color: color-mix(in srgb, var(--color-charcoal) 55%, transparent);
}

.tmb-article-head {
  padding-top: 1.25rem;
}

.tmb-article-head h1 {
  margin-top: 0.55rem;
  font-size: 1.9rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .tmb-article-head h1 {
    font-size: 2.5rem;
  }
}

.tmb-summary {
  margin-top: 0.85rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--tmb-text);
}

.tmb-byline {
  margin-top: 1rem;
  border-top: 1px solid var(--tmb-line);
  padding-top: 0.85rem;
}

/* The cover repeats the H1 inside the artwork, so the hero gets extra space above it
   to separate the two rather than being narrowed (an inset hero reads as misaligned
   against the left-aligned measure). The real H1 stays the primary heading. */
.tmb-hero {
  margin: 2.5rem 0 0;
}

.tmb-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
  border-radius: 1rem;
  background: var(--color-ivory);
}

.tmb-hero figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--color-charcoal) 78%, transparent);
}

.tmb-hero-note {
  margin-top: 0.65rem;
  padding: 0.65rem 0.8rem;
  border-left: 3px solid var(--color-sky);
  background: var(--color-sky-soft);
  border-radius: 0.5rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-charcoal) 82%, transparent);
}

.tmb-toc {
  margin-top: 1.75rem;
  border: 1px solid var(--tmb-line);
  border-left: 4px solid var(--color-sky);
  border-radius: 0.9rem;
  background: #fff;
  padding: 1rem 1.15rem;
}

.tmb-toc h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tmb-accent);
}

.tmb-toc ol {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.tmb-toc a {
  color: var(--tmb-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tmb-body {
  margin-top: 2rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tmb-text);
  text-align: left;
}

@media (min-width: 768px) {
  .tmb-body {
    font-size: 1.125rem;
  }
}

.tmb-body h2 {
  margin-top: 2.25rem;
  font-size: 1.4rem;
  font-weight: 600;
  scroll-margin-top: 6rem;
}

@media (min-width: 768px) {
  .tmb-body h2 {
    font-size: 1.6rem;
  }
}

.tmb-body h3 {
  margin-top: 1.75rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.tmb-body p {
  margin-top: 1rem;
}

.tmb-body ul,
.tmb-body ol {
  margin-top: 1rem;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.4rem;
}

.tmb-body li::marker {
  color: var(--tmb-accent);
}

.tmb-body ol li::marker {
  font-weight: 700;
}

.tmb-body a {
  color: var(--tmb-link);
  text-decoration: underline;
  text-decoration-color: var(--tmb-accent);
  text-underline-offset: 3px;
}

.tmb-body a:hover {
  color: var(--tmb-accent);
}

.tmb-callout {
  margin-top: 2.5rem;
  border: 1px solid var(--tmb-line);
  border-left: 4px solid var(--color-leaf);
  border-radius: 0.9rem;
  background: var(--color-leaf-soft);
  padding: 1.15rem 1.25rem;
}

.tmb-callout h2 {
  font-size: 1.2rem;
  font-weight: 600;
}

.tmb-callout p {
  margin-top: 0.5rem;
  line-height: 1.65;
  color: var(--tmb-text);
}

.tmb-note {
  margin-top: 1.5rem;
  border: 1px solid var(--tmb-line);
  border-left: 4px solid var(--color-tangerine);
  border-radius: 0.9rem;
  background: #fff;
  padding: 1.15rem 1.25rem;
}

.tmb-note h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tmb-accent);
}

.tmb-note p {
  margin-top: 0.5rem;
  line-height: 1.65;
  color: var(--tmb-text);
}

.tmb-related {
  margin-top: 2.75rem;
  border-top: 1px solid var(--tmb-line);
  padding-top: 1.5rem;
}

.tmb-related > h2 {
  font-size: 1.15rem;
  font-weight: 600;
}

.tmb-related .tmb-cards {
  margin-top: 1rem;
}

.tmb-back {
  margin-top: 2rem;
  font-size: 0.95rem;
}

.tmb-back a {
  color: var(--tmb-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Pricing tables (First 25 offer) ---------- */

.tmb-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.tmb-body table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.tmb-body caption {
  margin-bottom: 0.5rem;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-charcoal) 78%, transparent);
}

.tmb-body th,
.tmb-body td {
  border: 1px solid var(--tmb-line);
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.tmb-body th {
  background: var(--color-sky-soft);
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--tmb-head);
}

.tmb-body td.tmb-price-first25,
.tmb-body th.tmb-price-first25 {
  background: var(--color-leaf-soft);
}

.tmb-price-old {
  color: color-mix(in srgb, var(--color-charcoal) 65%, transparent);
  text-decoration: line-through;
  font-weight: 400;
}

.tmb-price-new {
  color: var(--tmb-accent);
  font-weight: 700;
}

.tmb-seats {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-tangerine) 45%, transparent);
  background: var(--color-tangerine-soft);
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tmb-head);
}

.tmb-seats-dot {
  height: 0.5rem;
  width: 0.5rem;
  flex: none;
  border-radius: 999px;
  background: var(--tmb-accent);
}

.tmb-seats.tmb-offer-closed {
  border-color: color-mix(in srgb, var(--color-charcoal) 30%, transparent);
  background: var(--color-sand);
}

/* ---------- Motion ---------- */

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