/*
Theme Name: Triangle Therapist
Theme URI: https://triangletherapist.com
Author: Alicia
Description: A refined, water-teal and champagne-gold theme for a group therapy practice. Picasso-inspired line art, editorial typography, therapist matching, and a therapist custom post type built for growth.
Version: 1.99.109
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: triangle-therapist
Tags: therapy, wellness, custom-colors, custom-logo, editor-style
*/

/* ==========================================================
   1. Design tokens — the approved palette
   ========================================================== */
:root {
  /* Color */
  --tt-water: #DCEFEA;        /* hero + soft section backgrounds */
  --tt-water-deep: #CFE8E1;   /* footer band */
  --tt-water-tint: #EAF4F0;   /* quote block */
  --tt-teal: #1F6E62;         /* primary action / links */
  --tt-teal-hover: #175A50;
  --tt-ink: #123F38;          /* headlines */
  --tt-body: #3E6A61;         /* body on water */
  --tt-body-neutral: #4B5A54; /* body on ivory */
  --tt-ivory: #FAF9F4;        /* page canvas */
  --tt-white: #FFFFFF;
  --tt-champagne: #C6A15B;    /* gold line work */
  --tt-champagne-deep: #A08040;
  --tt-champagne-tint: #F3EDDD;
  --tt-champagne-text: #7D6330;
  --tt-clay: #B0664A;         /* Picasso accent only */
  --tt-hairline: #E2E7DE;
  /* 4.67:1 on the water tint, up from 3.61. The old #6E8177 sat under the
     4.5:1 floor on every background it was used on, which is why ledes and
     taglines read washed out. Same sage hue, two steps deeper. */
  --tt-sage-mute: #5C6F66;

  /* Type */
  --tt-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --tt-font-body: "Jost", "Avenir Next", "Segoe UI", sans-serif;

  /* Rhythm */
  /* Two radii, and two only. Controls take the small one, cards and
     panels the large one. 50% stays for circles and 999px for pills,
     which are shapes rather than corner treatments. */
  --tt-radius: 4px;
  --tt-radius-card: 14px;

  /* One vertical rhythm for every full-width section on the site. */
  --tt-space-section: clamp(3rem, 7vw, 5rem);
  --tt-max: 1120px;
  --tt-pad: clamp(1.25rem, 4vw, 2.5rem);
}

/* ==========================================================
   2. Base
   ========================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tt-ivory);
  color: var(--tt-body-neutral);
  font-family: var(--tt-font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--tt-font-display);
  font-weight: 500;
  color: var(--tt-ink);
  line-height: 1.25;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.3rem; }

a { color: var(--tt-teal); text-decoration: none; }
a:hover { color: var(--tt-teal-hover); }

a:focus-visible,
button:focus-visible,
.tt-option:focus-visible {
  outline: 2px solid var(--tt-champagne);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; }

.tt-container {
  max-width: var(--tt-max);
  margin: 0 auto;
  padding-left: var(--tt-pad);
  padding-right: var(--tt-pad);
}

/* Eyebrow labels — the letterspaced gold small caps */
.tt-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  margin: 0 0 0.9rem;
  font-weight: 500;
}

/* Gold hairline rule */
.tt-rule {
  height: 2px;
  background: var(--tt-champagne);
  opacity: 0.55;
  border: 0;
  margin: 0;
}


/* Buttons */
.tt-btn {
  display: inline-block;
  background: var(--tt-teal);
  color: var(--tt-ivory);
  font-family: var(--tt-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.85rem 1.8rem;
  border: 0;
  border-radius: var(--tt-radius);
  cursor: pointer;
  transition: background 0.2s ease;
}
.tt-btn:hover { background: var(--tt-teal-hover); color: var(--tt-ivory); }

.tt-btn--gold {
  background: transparent;
  color: var(--tt-champagne-deep);
  border: 1px solid var(--tt-champagne);
}
.tt-btn--gold:hover { background: var(--tt-champagne-tint); color: var(--tt-champagne-text); }

/* ==========================================================
   3. Header
   ========================================================== */
.tt-header {
  background: var(--tt-ivory);
  border-bottom: 0.5px solid var(--tt-hairline);
  position: sticky;
  top: 0;
  z-index: 50;
}

.tt-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.tt-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--tt-teal-hover);
}

.tt-brand__name {
  font-family: var(--tt-font-display);
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-teal-hover);
}

.tt-nav ul {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-nav a {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--tt-ink);
}
.tt-nav a:hover { color: var(--tt-champagne-deep); }

.tt-header__cta { white-space: nowrap; }

.tt-nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--tt-champagne-deep);
  font-size: 1.4rem;
  cursor: pointer;
}

@media (max-width: 820px) {
  .tt-nav-toggle { display: block; }
  .tt-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--tt-ivory);
    border-bottom: 0.5px solid var(--tt-hairline);
    padding: 1rem var(--tt-pad) 1.4rem;
  }
  .tt-nav.is-open { display: block; }
  .tt-nav ul { flex-direction: column; gap: 0.9rem; }
  .tt-header__cta { display: none; }
}

/* ==========================================================
   4. Hero
   ========================================================== */
.tt-hero {
  background: var(--tt-water);
  padding: var(--tt-space-section) 0 0;
  overflow: hidden;
}

.tt-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.5rem;
  align-items: center;
}

.tt-hero h1 { color: var(--tt-ink); }
.tt-hero p.tt-hero__lede {
  color: var(--tt-body);
  font-size: 1.05rem;
  max-width: 34em;
  margin: 0 0 1.8rem;
}

.tt-hero__art { padding-bottom: 2.5rem; }
.tt-hero__art svg { display: block; width: 100%; height: auto; }

@media (max-width: 820px) {
  .tt-hero__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   5. Matcher quiz
   ========================================================== */
.tt-matcher {
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-top: 2px solid var(--tt-champagne);
  border-radius: var(--tt-radius);
  padding: 1.6rem 1.8rem;
  max-width: 560px;
  margin: 0 0 3rem;
}

.tt-matcher__step-label {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  color: var(--tt-champagne-deep);
  margin: 0 0 0.6rem;
}

.tt-matcher__question {
  font-family: var(--tt-font-display);
  font-size: 1.25rem;
  color: var(--tt-ink);
  margin: 0 0 1rem;
}

.tt-matcher__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.tt-option {
  border: 0.5px solid #D8D3C4;
  background: transparent;
  color: var(--tt-sage-mute);
  font-family: var(--tt-font-body);
  font-size: 0.92rem;
  padding: 0.75rem 0.6rem;
  border-radius: var(--tt-radius);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.tt-option:hover { border-color: var(--tt-teal); color: var(--tt-ink); }

.tt-option.is-selected {
  border: 1.5px solid var(--tt-teal);
  background: #EFF8F3;
  color: var(--tt-ink);
}

.tt-matcher__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.2rem;
}

.tt-matcher__skip {
  font-size: 0.85rem;
  color: var(--tt-sage-mute);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================
   6. Therapist cards
   ========================================================== */
.tt-section { padding: var(--tt-space-section) 0; }
.tt-section--water { background: var(--tt-water-tint); }

.tt-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.tt-link-underline {
  font-size: 0.92rem;
  color: var(--tt-teal);
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 2px;
}

.tt-therapists {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.1rem;
}

.tt-card {
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  padding: 1.3rem;
  transition: border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tt-card__tagline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-card__status { margin: 0 0 0.9rem; }
.tt-card .tt-card__actions { margin-top: auto; }
.tt-card:hover { border-color: var(--tt-champagne); }
.tt-card.is-hidden { display: none; }

.tt-card__top {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

.tt-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--tt-champagne);
  background: #DFF0EB;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-avatar img { width: 100%; height: 100%; object-fit: cover; }

.tt-card__name {
  font-family: var(--tt-font-display);
  font-size: 1.15rem;
  color: var(--tt-ink);
  margin: 0;
}

.tt-card__tagline {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--tt-sage-mute);
  margin: 0.2rem 0 0;
}

.tt-badge-match {
  margin-left: auto;
  border: 0.5px solid var(--tt-champagne);
  color: var(--tt-champagne-deep);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.65rem;
  border-radius: var(--tt-radius);
  white-space: nowrap;
}

.tt-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.tt-tag {
  background: var(--tt-champagne-tint);
  color: var(--tt-champagne-text);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--tt-radius);
}
/* A tag that goes somewhere: the same chip, but it answers the cursor.
   No underline, since underlined uppercase at this size reads as noise;
   the hover deepening is the affordance. */
a.tt-tag {
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
a.tt-tag:hover,
a.tt-tag:focus-visible {
  background: var(--tt-champagne);
  color: var(--tt-ivory);
}

.tt-availability {
  font-size: 0.8rem;
  color: #2C6A5E;
}
.tt-availability::before {
  content: "●";
  color: var(--tt-champagne);
  margin-right: 0.35rem;
}

.tt-card__actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
}
.tt-card__actions .tt-btn { padding: 0.55rem 1.1rem; font-size: 0.85rem; }

/* ==========================================================
   7. What to expect
   ========================================================== */
.tt-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  text-align: center;
}

.tt-step__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tt-water);
  margin: 0 auto 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-teal);
}
.tt-step:nth-child(even) .tt-step__icon {
  background: var(--tt-champagne-tint);
  color: var(--tt-champagne-deep);
}

.tt-step h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.tt-step p { font-size: 0.92rem; margin: 0; }

/* ==========================================================
   8. Quote + fees band
   ========================================================== */
.tt-quote {
  background: var(--tt-water-tint);
  border-left: 2px solid var(--tt-champagne);
  border-radius: 0;
  padding: 1.6rem 1.8rem;
  max-width: 720px;
  margin: 0 auto;
}

.tt-quote p {
  font-family: var(--tt-font-display);
  font-size: 1.25rem;
  color: var(--tt-ink);
  margin: 0 0 0.5rem;
}

.tt-quote cite {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
}

.tt-fees {
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  padding: 1.4rem 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.tt-fees h3 { margin: 0; }
.tt-fees p { margin: 0.2rem 0 0; font-size: 0.92rem; }

/* ==========================================================
   9. Footer
   ========================================================== */
.tt-footer {
  background: var(--tt-water-deep);
  padding: 1.4rem 0;
}

.tt-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.tt-footer small {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--tt-body);
  text-transform: uppercase;
}

.tt-footer .tt-footer__locale {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--tt-champagne-deep);
  text-transform: uppercase;
}

/* ==========================================================
   10. Single therapist + archive + generic content
   ========================================================== */
.tt-profile {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.tt-profile .tt-avatar { width: 180px; height: 180px; }

@media (max-width: 680px) {
  .tt-profile { grid-template-columns: 1fr; }
}

.tt-content { max-width: 720px; }
.tt-content p { margin: 0 0 1.2em; }

/* ==========================================================
   Editorial pages — a quieter scale than the hero
   ========================================================== */
.tt-page .tt-page__title {
  font-family: var(--tt-font-body);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.004em;
  color: var(--tt-ink);
  margin: 0.15rem 0 0.75rem;
  max-width: 22em;
}
.tt-page .tt-eyebrow { margin: 0 0 0.5rem; }
.tt-page .tt-eyebrow a { color: inherit; }
.tt-page .tt-eyebrow a:hover { color: var(--tt-champagne-deep); }

/* The opening paragraph carries a little more air. */
.tt-page > p:first-of-type,
.tt-page .tt-rule + p {
  font-size: 1.08rem;
  line-height: 1.72;
  color: var(--tt-body-neutral);
}

.tt-content h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.62rem);
  line-height: 1.25;
  margin: 2.6rem 0 0.7rem;
}
.tt-content h2:first-child { margin-top: 0; }

.tt-content h3 {
  font-size: 1.12rem;
  margin: 1.9rem 0 0.5rem;
  color: var(--tt-teal);
}

.tt-content h4 {
  font-family: var(--tt-font-body);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-champagne-text);
  margin: 1.7rem 0 0.5rem;
}

.tt-content ul,
.tt-content ol { margin: 0 0 1.3em; padding-left: 1.15em; }
.tt-content li { margin: 0 0 0.45em; padding-left: 0.2em; }
.tt-content ul li::marker { color: var(--tt-champagne); }
.tt-content ol li::marker { color: var(--tt-champagne-text); font-variant-numeric: tabular-nums; }

.tt-content blockquote {
  margin: 1.8rem 0;
  padding: 0 0 0 1.3rem;
  border-left: 2px solid var(--tt-champagne);
  border-radius: 0;
  font-family: var(--tt-font-display);
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--tt-ink);
}

.tt-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0 1.9rem;
  font-size: 0.94rem;
}
.tt-content thead th {
  text-align: left;
  font-family: var(--tt-font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tt-champagne-text);
  border-bottom: 1px solid var(--tt-champagne);
  padding: 0 0.9rem 0.55rem 0;
}
.tt-content tbody td {
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 0.5px solid var(--tt-hairline);
  vertical-align: top;
}
.tt-content tbody tr:last-child td { border-bottom: none; }

.tt-content a {
  border-bottom: 1px solid rgba(198, 161, 91, 0.55);
  padding-bottom: 1px;
}
.tt-content a:hover { border-bottom-color: var(--tt-champagne); }

@media (max-width: 640px) {
  .tt-content table { font-size: 0.88rem; }
  .tt-content thead th,
  .tt-content tbody td { padding-right: 0.55rem; }
}

/* ==========================================================
   11. Motion + accessibility
   ========================================================== */
.tt-fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.tt-fade.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .tt-fade { opacity: 1; transform: none; }
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ==========================================================
   12. Comprehensive profile additions
   ========================================================== */
.tt-facts {
  margin-top: 1.2rem;
  border-top: 1px solid var(--tt-champagne);
  padding-top: 0.9rem;
}
.tt-facts p {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.85rem;
  margin: 0 0 0.55rem;
  color: var(--tt-body-neutral);
}
.tt-facts span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  padding-top: 2px;
  white-space: nowrap;
}

.tt-status { margin: 0.4rem 0; }
.tt-status--waitlist .tt-availability::before { color: var(--tt-champagne-deep); }
.tt-status--closed .tt-availability { color: var(--tt-sage-mute); }
.tt-status--closed .tt-availability::before { color: var(--tt-sage-mute); }

.tt-tag--teal {
  background: #DFF0EB;
  color: #175A50;
}

.tt-profile-block { margin-bottom: 1.3rem; }

.tt-profile-section { margin-bottom: 2.6rem; }
.tt-profile-section h2 {
  font-size: 1.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--tt-hairline);
}

.tt-profile-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
}
@media (max-width: 680px) {
  .tt-profile-columns { grid-template-columns: 1fr; }
}

.tt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tt-list li {
  padding: 0.5rem 0 0.5rem 1.1rem;
  border-bottom: 0.5px solid var(--tt-hairline);
  position: relative;
  font-size: 0.95rem;
}
.tt-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tt-champagne);
}

.tt-supervision {
  font-size: 0.82rem;
  color: var(--tt-sage-mute);
  border-top: 0.5px solid var(--tt-hairline);
  padding-top: 1rem;
  margin-top: 2rem;
}

/* ==========================================================
   13. Consult request form
   ========================================================== */

.tt-consult {
  margin-top: 2.5rem;
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-top: 2px solid var(--tt-champagne);
  border-radius: var(--tt-radius);
  padding: 1.8rem;
  scroll-margin-top: 7.5rem;
}
.tt-consult h2 { border: 0; }

.tt-consult__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.9rem;
}
@media (max-width: 680px) {
  .tt-consult__grid { grid-template-columns: 1fr; }
}

.tt-consult__form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  margin-bottom: 0.9rem;
}
.tt-consult__form input,
.tt-consult__form textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.8rem;
  font-family: var(--tt-font-body);
  font-size: 0.95rem;
  color: var(--tt-ink);
  background: var(--tt-ivory);
  border: 0.5px solid #D8D3C4;
  border-radius: var(--tt-radius);
}
.tt-consult__form input:focus,
.tt-consult__form textarea:focus {
  outline: none;
  border-color: var(--tt-teal);
}

.tt-consult__privacy {
  font-size: 0.8rem;
  color: var(--tt-sage-mute);
  font-style: italic;
}

.tt-consult__notice {
  padding: 0.9rem 1.1rem;
  border-radius: var(--tt-radius);
  font-size: 0.95rem;
}
.tt-consult__notice--ok { background: #DFF0EB; color: #175A50; border-left: 2px solid var(--tt-teal); }
.tt-consult__notice--err { background: #F6E7DE; color: #8A4A32; border-left: 2px solid var(--tt-clay); }

.tt-hp { position: absolute; left: -9999px; }

/* ==========================================================
   14. Attachment style quiz
   ========================================================== */
.tt-quiz {
  max-width: 720px;
  margin: 0 auto;
}
.tt-quiz__intro { max-width: 40em; }

.tt-quiz__item {
  border: 0;
  border-bottom: 0.5px solid var(--tt-hairline);
  margin: 0;
  padding: 1.1rem 0;
}
.tt-quiz__item legend {
  font-size: 1rem;
  color: var(--tt-ink);
  margin-bottom: 0.7rem;
  padding: 0;
}
.tt-quiz__num { color: var(--tt-champagne-deep); font-family: var(--tt-font-display); }

.tt-quiz__item--missing legend { color: var(--tt-clay); }

.tt-quiz__scale { display: flex; gap: 0.5rem; }

.tt-quiz__choice input { position: absolute; opacity: 0; }
.tt-quiz__choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0.5px solid #D8D3C4;
  border-radius: 50%;
  font-size: 0.9rem;
  color: var(--tt-sage-mute);
  cursor: pointer;
  transition: all 0.15s ease;
}
.tt-quiz__choice span:hover { border-color: var(--tt-teal); color: var(--tt-ink); }
.tt-quiz__choice input:checked + span {
  background: var(--tt-teal);
  border-color: var(--tt-teal);
  color: var(--tt-ivory);
}
.tt-quiz__choice input:focus-visible + span {
  outline: 2px solid var(--tt-champagne);
  outline-offset: 2px;
}

.tt-quiz__scale-key {
  font-size: 0.8rem;
  color: var(--tt-sage-mute);
  margin: 0.8rem 0 1.4rem;
}

.tt-quiz__incomplete { color: var(--tt-clay); font-size: 0.9rem; }

.tt-quiz__bars { display: grid; gap: 0.8rem; margin: 1.2rem 0 1.4rem; max-width: 420px; }
.tt-quiz__bars span {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
}
.tt-bar {
  height: 8px;
  background: var(--tt-water);
  border-radius: 999px;
  margin-top: 0.3rem;
  overflow: hidden;
}
.tt-bar__fill {
  height: 100%;
  width: 0;
  background: var(--tt-teal);
  border-right: 2px solid var(--tt-champagne);
  transition: width 0.8s ease;
}

.tt-quiz__disclaimer {
  font-size: 0.8rem;
  color: var(--tt-sage-mute);
  font-style: italic;
  max-width: 44em;
}

/* ==========================================================
   15. Custom logo sizing
   ========================================================== */
.tt-brand .custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
}
/* Catch the logo no matter what markup/class WordPress outputs it with. */
.tt-header img,
.tt-brand img,
.tt-brand img.custom-logo,
.tt-brand .custom-logo-link img {
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  max-width: 240px !important;
  object-fit: contain !important;
}
@media (max-width: 820px) {
  .tt-header img,
  .tt-brand img {
    max-height: 42px !important;
    max-width: 160px !important;
  }
}


/* ==========================================================
   16. Reference redesign — announcement, hero, stages,
   about, rows, blog, next-step band
   ========================================================== */

/* Announcement bar */
.tt-announce {
  background: linear-gradient(160deg, #6F9C8C, #557E70);
  color: #F4F9F6;
  font-size: 0.8rem;
}
.tt-announce__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.tt-announce a {
  color: #F3E7C8;
  white-space: nowrap;
  font-weight: 500;
}
@media (max-width: 680px) {
  .tt-announce__inner span { display: none; }
  .tt-announce__inner { justify-content: center; }
}

/* Nav — small caps, editorial */
.tt-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Gold buttons */
/* Deep teal rather than gold. White on champagne measures about
   3.6:1, which fails the 4.5:1 threshold for anything but large
   text, and a page-sized gold block also spends a colour that works
   harder as an accent. Teal on ivory clears 7:1 comfortably. */
.tt-btn--goldfill {
  background: var(--tt-teal);
  border: 1px solid var(--tt-teal);
  color: var(--tt-ivory);
}
.tt-btn--goldfill:hover {
  background: var(--tt-teal-hover);
  border-color: var(--tt-teal-hover);
  color: var(--tt-ivory);
}
.tt-btn--goldline {
  background: transparent;
  color: var(--tt-champagne-deep);
  border: 1px solid var(--tt-champagne);
}
.tt-btn--goldline:hover {
  background: var(--tt-champagne-tint);
  color: var(--tt-champagne-text);
}

.tt-link-arrow {
  font-size: 0.9rem;
  color: var(--tt-teal-hover);
  font-weight: 500;
}
.tt-link-arrow:hover { color: var(--tt-champagne-deep); }

.tt-center { text-align: center; }

/* Hero v2 — ivory, photo blob right */
.tt-hero2 {
  background: var(--tt-ivory);
  padding: var(--tt-space-section) 0;
  overflow: hidden;
}
.tt-hero2__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.5rem;
  align-items: center;
}
.tt-hero2__copy h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.3rem);
}
.tt-hero2__lede {
  color: var(--tt-body-neutral);
  font-size: 1.02rem;
  max-width: 32em;
  margin: 0 0 1.6rem;
}
.tt-hero2__actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.tt-hero2__media {
  position: relative;
  display: flex;
  justify-content: center;
}
.tt-hero2__blob {
  width: min(430px, 100%);
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 58% 42% 46% 54% / 48% 52% 48% 52%;
  border: 1px solid #E4DECB;
}
.tt-hero2__blob--art {
  background: var(--tt-water);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.tt-hero2__blob--art svg { width: 85%; height: auto; }
.tt-hero2__leaf {
  position: absolute;
  right: -12px;
  bottom: -18px;
  opacity: 0.9;
}
@media (max-width: 820px) {
  .tt-hero2__grid { grid-template-columns: 1fr; }
  .tt-hero2__media { order: -1; }
  .tt-hero2__blob { width: min(320px, 90%); }
}

/* Life stages */
.tt-stages h2 { margin-bottom: 2rem; }

/* Featured faces — the circle row under the stage tiles */
.tt-faces {
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 3.5vw, 2.6rem);
  margin: 2.6rem 0 2.2rem;
}
.tt-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 96px;
  flex-shrink: 0;
}
.tt-face__ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid var(--tt-champagne);
  padding: 3px;
  background: var(--tt-white);
  overflow: hidden;
  display: block;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.tt-face__ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.tt-face:hover .tt-face__ring {
  border-color: var(--tt-champagne-deep);
  transform: translateY(-3px);
}
.tt-face__name {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--tt-ink);
}
.tt-face__cred {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tt-champagne-text);
  margin-top: 0.15rem;
}
@media (max-width: 700px) {
  .tt-faces {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--tt-pad) 0.6rem;
    margin-left: calc(-1 * var(--tt-pad));
    margin-right: calc(-1 * var(--tt-pad));
  }
  .tt-faces::-webkit-scrollbar { display: none; }
}
.tt-stages__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.8rem;
}
.tt-stage {
  text-align: center;
  padding: 0.5rem 0.8rem;
  color: inherit;
  border-right: 0.5px solid var(--tt-hairline);
}
.tt-stage:last-child { border-right: 0; }
.tt-stage__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 0.8rem;
  border: 1px solid var(--tt-champagne);
  border-radius: 50%;
  color: var(--tt-teal);
  transition: all 0.2s ease;
}
.tt-stage:hover .tt-stage__icon {
  background: var(--tt-champagne-tint);
  color: var(--tt-champagne-deep);
}
.tt-stage h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.tt-stage p { font-size: 0.85rem; color: var(--tt-sage-mute); margin: 0; }
@media (max-width: 680px) {
  .tt-stage { border-right: 0; border-bottom: 0.5px solid var(--tt-hairline); padding-bottom: 1.2rem; }
  .tt-stage:last-child { border-bottom: 0; }
}

/* About split */
.tt-about__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
.tt-checks {
  list-style: none;
  margin: 1.2rem 0 1.6rem;
  padding: 0;
}
.tt-checks li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.9rem;
  font-size: 0.98rem;
}
.tt-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 18px;
  height: 18px;
  border: 1px solid var(--tt-teal);
  border-radius: 50%;
}
.tt-checks li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.85rem;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--tt-teal);
  border-bottom: 1.6px solid var(--tt-teal);
  transform: rotate(-45deg);
}
.tt-about__panel {
  background: linear-gradient(160deg, #6F9C8C, #557E70);
  border-radius: var(--tt-radius);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.tt-about__panel img {
  max-width: 70% !important;
  max-height: 200px !important;
  width: auto !important;
  height: auto !important;
  filter: brightness(0) invert(1) sepia(0.25) saturate(2) hue-rotate(10deg);
  opacity: 0.95;
}
.tt-about__wordmark {
  font-family: var(--tt-font-display);
  font-size: 1.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #F3E7C8;
  text-align: center;
}
@media (max-width: 820px) {
  .tt-about__grid { grid-template-columns: 1fr; }
  .tt-about__panel { min-height: 220px; }
}

/* Therapist rows */
.tt-rows { display: grid; gap: 0.9rem; }
.tt-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  padding: 1rem 1.3rem;
  transition: border-color 0.2s ease;
}
.tt-row:hover { border-color: var(--tt-champagne); }
.tt-row.is-hidden { display: none; }
.tt-row__avatar { width: 64px; height: 64px; }
.tt-row__info { flex: 1; min-width: 0; }
.tt-row__name {
  font-size: 1.2rem;
  margin: 0;
}
.tt-row__name a { color: var(--tt-ink); }
.tt-row__tagline {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--tt-sage-mute);
  margin: 0.15rem 0 0;
}
.tt-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
.tt-row__actions { flex-shrink: 0; }
.tt-row__actions .tt-btn { padding: 0.6rem 1.2rem; font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 680px) {
  .tt-row { flex-wrap: wrap; }
  .tt-row__actions { width: 100%; }
  .tt-row__actions .tt-btn { width: 100%; text-align: center; }
}

/* Blog showcase */
.tt-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
}
.tt-post {
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  overflow: hidden;
  padding-bottom: 1.3rem;
  transition: border-color 0.2s ease;
}
.tt-post:hover { border-color: var(--tt-champagne); }
.tt-post__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--tt-water);
  overflow: hidden;
}
.tt-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tt-post__thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.tt-post__date {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  margin: 1rem 1.3rem 0.3rem;
}
.tt-post__title {
  font-size: 1.25rem;
  margin: 0 1.3rem 0.4rem;
}
.tt-post__title a { color: var(--tt-ink); }
.tt-post__title a:hover { color: var(--tt-teal); }
.tt-post__excerpt {
  font-size: 0.92rem;
  margin: 0 1.3rem 0.8rem;
  color: var(--tt-body-neutral);
}
.tt-post .tt-link-arrow { margin: 0 1.3rem; }

/* Next-step band */
.tt-nextstep {
  border-top: 0.5px solid var(--tt-hairline);
  padding: var(--tt-space-section) 0 calc(var(--tt-space-section) + 2rem);
  background: var(--tt-ivory);
}
.tt-nextstep__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.5rem;
  align-items: center;
}
.tt-nextstep__panel {
  /* Same register as the quiz band, so the page's two dark moments read
     as one deliberate motif rather than three drifting greens. */
  /* One shade gentler than the band and footer: the closing invitation
     should feel like dusk, not midnight, or the page ends on two heavy
     darks stacked against each other. */
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(201, 162, 75, 0.14) 0%, rgba(201, 162, 75, 0) 60%),
    linear-gradient(168deg, #2E6654 0%, #245344 55%, #1A4A3C 100%);
  border-radius: var(--tt-radius);
  padding: 2.2rem;
}
.tt-nextstep__panel h2 {
  color: #F5F1E6;
  margin-bottom: 1.2rem;
}
.tt-nextstep__copy p { margin: 0 0 0.7rem; }
@media (max-width: 820px) {
  .tt-nextstep__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   17. Footer v2 — elegant, legal-complete
   ========================================================== */
.tt-footer2 {
  background: var(--tt-ink);
  color: #C9DCD4;
  margin-top: 0;
}
.tt-footer2__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-top: clamp(2.5rem, 5vw, 3.8rem);
  padding-bottom: 2.2rem;
}
.tt-footer2__brand img {
  /* Size lives in .tt-footlogo img; color is the uploaded file's own —
     the old !important caps and forced-white filter are gone. */
  margin-bottom: 0.9rem;
}
.tt-footer2__brand .tt-brand__name { color: #F5F1E6; }
.tt-footer2__tag {
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0.4rem 0 0.8rem;
  max-width: 30em;
}
.tt-footer2__locale {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tt-champagne);
  margin: 0;
}
.tt-footer2__col h3 {
  font-family: var(--tt-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tt-champagne);
  margin: 0 0 0.9rem;
}
.tt-footer2__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tt-footer2__col li { margin-bottom: 0.55rem; }
.tt-footer2__col a {
  color: #DCE9E3;
  font-size: 0.9rem;
}
.tt-footer2__col a:hover { color: var(--tt-champagne); }
.tt-footer2__crisis {
  font-size: 0.78rem;
  line-height: 1.6;
  color: #9FBBB0;
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 0.5px solid rgba(198, 161, 91, 0.35);
}
.tt-footer2__bottom {
  border-top: 0.5px solid rgba(198, 161, 91, 0.3);
  padding: 1rem 0;
}
.tt-footer2__bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.tt-footer2__bottom small {
  font-size: 0.74rem;
  color: #8FAEA3;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .tt-footer2__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tt-footer2__grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ==========================================================
   18. The Journal — magazine blog styling
   ========================================================== */
.tt-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  margin: 0 0 0.4rem;
}

.tt-journal__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 2px solid var(--tt-champagne);
  padding-bottom: 1rem;
  margin-bottom: 1.8rem;
}

.tt-journal__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.2rem;
  align-items: start;
}
@media (max-width: 820px) {
  .tt-journal__grid { grid-template-columns: 1fr; }
}

/* Featured story — modest image, editorial text */
.tt-feature { display: grid; gap: 1rem; }
.tt-feature__thumb {
  display: block;
  aspect-ratio: 4 / 3;
  max-height: 340px;
  overflow: hidden;
  border-radius: var(--tt-radius);
  background: var(--tt-water);
}
.tt-feature__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.tt-feature:hover .tt-feature__thumb img { transform: scale(1.03); }
.tt-feature__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.tt-feature__title a { color: var(--tt-ink); }
.tt-feature__title a:hover { color: var(--tt-teal); }
.tt-feature__excerpt {
  font-size: 0.98rem;
  color: var(--tt-body-neutral);
  margin: 0 0 0.7rem;
}

/* Compact editorial briefs — small square thumbs, hairline dividers */
.tt-journal__side { display: grid; gap: 0; align-content: start; }
.tt-brief {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 0.5px solid var(--tt-hairline);
}
.tt-journal__side .tt-brief:first-child { padding-top: 0; }
.tt-brief__thumb {
  display: block;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--tt-radius);
  background: var(--tt-water);
}
.tt-brief__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tt-brief__title {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0;
}
.tt-brief__title a { color: var(--tt-ink); }
.tt-brief__title a:hover { color: var(--tt-teal); }
.tt-brief__excerpt {
  font-size: 0.88rem;
  color: var(--tt-sage-mute);
  margin: 0.35rem 0 0;
}
.tt-journal__side--pair {
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.tt-journal__side--pair .tt-brief { border-bottom: 0; padding: 0; }
@media (max-width: 680px) {
  .tt-journal__side--pair { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* Journal index (posts page) */
.tt-journal-masthead {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2.5rem;
}
.tt-journal-masthead__lede { color: var(--tt-sage-mute); }
.tt-feature--lead {
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 820px) {
  .tt-feature--lead { grid-template-columns: 1fr; }
}
.tt-brief--index { max-width: 780px; }
.tt-journal-pagination { margin-top: 2rem; }
.tt-journal-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.9rem;
}
.tt-journal-pagination a,
.tt-journal-pagination .current {
  color: var(--tt-teal);
  padding: 0.3rem 0.6rem;
}
.tt-journal-pagination .current { color: var(--tt-champagne-deep); }

/* ==========================================================
   19. Essay — single post editorial typography
   ========================================================== */
.tt-essay__head {
  background: var(--tt-water);
  padding: var(--tt-space-section) 0;
  text-align: center;
}
.tt-essay__head-inner { max-width: 760px; }
.tt-essay__head .tt-kicker { margin-bottom: 0.8rem; }
.tt-essay__title {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}
.tt-essay__meta {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--tt-body);
  margin: 0;
}
.tt-essay__dot { color: var(--tt-champagne); margin: 0 0.4rem; }

.tt-essay__hero {
  max-width: 860px;
  margin: -1.8rem auto 0;
  padding: 0 var(--tt-pad);
}
.tt-essay__hero img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 78vh;
  margin: 0 auto;
  border-radius: var(--tt-radius);
  border: 1px solid #E4DECB;
}

/* The prose — narrow measure, generous leading, drop cap */
.tt-prose {
  max-width: 680px;
  margin: clamp(2rem, 5vw, 3rem) auto;
  font-size: 1.08rem;
  line-height: 1.85;
  color: #3B4A44;
}
.tt-prose > p:first-of-type::first-letter {
  font-family: var(--tt-font-display);
  font-size: 3.6em;
  line-height: 0.85;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--tt-teal);
}
.tt-prose p { margin: 0 0 1.4em; }
.tt-prose h2 {
  font-size: 1.7rem;
  margin: 2em 0 0.6em;
}
.tt-prose h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--tt-champagne);
  margin-top: 0.45rem;
  opacity: 0.7;
}
.tt-prose h3 { font-size: 1.3rem; margin: 1.8em 0 0.5em; }
.tt-prose a {
  color: var(--tt-teal);
  border-bottom: 1px solid var(--tt-champagne);
}
.tt-prose a:hover { color: var(--tt-champagne-deep); }
.tt-prose blockquote {
  margin: 2em 0;
  padding: 0.4em 0 0.4em 1.6em;
  border-left: 2px solid var(--tt-champagne);
  font-family: var(--tt-font-display);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--tt-ink);
}
.tt-prose blockquote p { margin: 0; }
.tt-prose ul, .tt-prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.tt-prose li { margin-bottom: 0.5em; }
.tt-prose li::marker { color: var(--tt-champagne-deep); }
.tt-prose img {
  border-radius: var(--tt-radius);
  margin: 0.6em 0;
}
.tt-prose figcaption {
  font-size: 0.82rem;
  color: var(--tt-sage-mute);
  text-align: center;
  margin-top: 0.5em;
}
.tt-prose hr {
  border: 0;
  text-align: center;
  margin: 2.4em 0;
}
.tt-prose hr::after {
  content: "· · ·";
  color: var(--tt-champagne-deep);
  letter-spacing: 0.8em;
  font-size: 1rem;
}

.tt-essay__foot {
  max-width: 680px;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.tt-essay__foot-note {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--tt-ink);
  margin: 0 0 1.2rem;
}
.tt-essay__foot-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

/* ==========================================================
   20. Next-step band — unified teal panel
   ========================================================== */
.tt-nextstep__panel--full {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(2rem, 5vw, 3.2rem);
}
.tt-nextstep__panel--full h2 {
  color: #F5F1E6;
  margin-bottom: 0.8rem;
}
.tt-nextstep__lead {
  color: #EFE7D2;
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}
.tt-nextstep__sub {
  color: #C9DCD4;
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
  max-width: 36em;
}
.tt-nextstep__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.tt-nextstep__fees {
  color: #DCE9E3;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 2px;
}
.tt-nextstep__fees:hover { color: var(--tt-champagne); }
@media (max-width: 820px) {
  .tt-nextstep__panel--full { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* About panel photo variant */
.tt-about__panel--photo {
  background-size: cover;
  background-position: center;
  min-height: 380px;
}

/* ==========================================================
   21. Block editor buttons — on-brand everywhere
   ========================================================== */
.wp-block-button__link {
  background: var(--tt-teal);
  color: var(--tt-ivory) !important;
  font-family: var(--tt-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.85rem 1.8rem;
  border-radius: var(--tt-radius);
  transition: background 0.2s ease;
}
.wp-block-button__link:hover { background: var(--tt-teal-hover); }
.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-gold .wp-block-button__link {
  background: var(--tt-champagne-deep);
  color: #FFFDF7 !important;
}
.wp-block-button.is-style-gold .wp-block-button__link:hover { background: #8A6C33; }
.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--tt-champagne-deep) !important;
  border: 1px solid var(--tt-champagne);
}
.is-style-outline .wp-block-button__link:hover {
  background: var(--tt-champagne-tint);
  color: var(--tt-champagne-text) !important;
}

/* ==========================================================
   22. Essay advanced sections
   ========================================================== */
.tt-callout-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  margin: 0 0 0.5rem;
  font-weight: 500;
}

.tt-takeaways {
  background: #FBF7EC;
  border: 0.5px solid #E5DFCE;
  border-top: 2px solid var(--tt-champagne);
  border-radius: 0 0 4px 4px;
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.6rem;
}
.tt-takeaways ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tt-takeaways li {
  font-size: 0.95rem;
  line-height: 1.7;
  padding-left: 1.2rem;
  position: relative;
  margin-bottom: 0.35rem;
}
.tt-takeaways li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--tt-champagne-deep);
}

.tt-toc {
  position: relative;
  margin: 0 0 2.6rem;
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  background: var(--tt-white);
  overflow: hidden;
}
/* The photograph, lightly. Wash strength is set per post. */
.tt-toc--washed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tt-toc-img);
  background-size: cover;
  background-position: center;
  opacity: var(--tt-toc-wash, 0.14);
  pointer-events: none;
}
/* A soft ivory veil rising from the text side keeps every line legible
   even at the strongest wash. */
.tt-toc--washed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(250, 249, 244, 0.9) 0%, rgba(250, 249, 244, 0.55) 55%, rgba(250, 249, 244, 0.25) 100%);
  pointer-events: none;
}
.tt-toc__inner {
  position: relative;
  z-index: 1;
  padding: 1.9rem 2.1rem 1.7rem;
}
.tt-toc__kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.2rem;
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
}
.tt-toc__kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tt-hairline);
}
.tt-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tt-toc;
}
.tt-toc li {
  counter-increment: tt-toc;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}
.tt-toc li::before {
  content: counter(tt-toc, decimal-leading-zero);
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--tt-champagne-deep);
  min-width: 1.6em;
  flex-shrink: 0;
}
.tt-toc a {
  border-bottom: 0;
  color: var(--tt-ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.28rem;
  line-height: 1.35;
  transition: color 0.15s ease;
}
.tt-toc a:hover { color: var(--tt-champagne-deep); }
@media (max-width: 640px) {
  .tt-toc__inner { padding: 1.4rem 1.3rem 1.2rem; }
  .tt-toc a { font-size: 1.15rem; }
}

/* Numbered section headings — automatic */
.tt-prose { counter-reset: tt-section; }
.tt-prose h2 { counter-increment: tt-section; }
.tt-prose h2::before {
  content: counter(tt-section) " — ";
  color: var(--tt-champagne-deep);
  font-size: 0.75em;
  letter-spacing: 0.08em;
}

/* On stories the counter and dash are retired: headings are pure
   typography, and the essay is read on a clean white field. */
.single-post .tt-prose h2::before { content: none; }
.single-post .tt-prose h2::after { content: none; }
.single-post .tt-essay--mag {
  background: var(--tt-white);
}

/* ==========================================================
   Living paper — the landscape pressed under the words
   ========================================================== */
/* The story's image dissolves into the page: strongest where the
   essay opens, thinning to almost nothing through dense reading,
   returning faintly at the close. A handmade grain sits over the
   whole sheet. Both layers are decorative; text stays above. */
.single-post .tt-paper {
  position: relative;
}
.single-post .tt-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tt-paper-img);
  background-size: cover;
  background-position: center top;
  opacity: var(--tt-paper-wash, 0.14);
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.5) 14%,
    rgba(0, 0, 0, 0.07) 34%,
    rgba(0, 0, 0, 0.04) 78%,
    rgba(0, 0, 0, 0.22) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.5) 14%,
    rgba(0, 0, 0, 0.07) 34%,
    rgba(0, 0, 0, 0.04) 78%,
    rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
}
.single-post .tt-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.62  0 0 0 0 0.48  0 0 0 0 0.24  0 0 0 0.05 0'/></filter><rect width='600' height='600' filter='url(%23p)'/></svg>");
  background-size: 600px 600px;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
.single-post .tt-paper > * {
  position: relative;
  z-index: 1;
}
@media print {
  .single-post .tt-paper::before,
  .single-post .tt-paper::after { content: none; }
}

/* ==========================================================
   Article bullets — round brown dots, one clean left edge
   ========================================================== */
.single-post .tt-prose ul {
  list-style: none;
  margin: 0 0 1.6em;
  padding-left: 0.2em;
}
.single-post .tt-prose ul > li {
  position: relative;
  padding-left: 1.55em;
  margin-bottom: 0.8em;
  line-height: 1.75;
}
.single-post .tt-prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tt-champagne-deep);
}
/* A nested thought carries a hollow dot. */
.single-post .tt-prose ul ul {
  margin: 0.6em 0 0.2em;
}
.single-post .tt-prose ul ul > li::before {
  background: transparent;
  border: 1.3px solid var(--tt-champagne-deep);
  width: 6px;
  height: 6px;
}
/* Numbered lists stay numbered, set small in gold, aligned with points. */
.single-post .tt-prose ol {
  list-style: none;
  counter-reset: tt-golden;
  margin: 0 0 1.6em;
  padding-left: 0.2em;
}
.single-post .tt-prose ol > li {
  position: relative;
  counter-increment: tt-golden;
  padding-left: 1.55em;
  margin-bottom: 0.8em;
  line-height: 1.75;
}
.single-post .tt-prose ol > li::before {
  content: counter(tt-golden);
  position: absolute;
  left: 0;
  top: 0.12em;
  font-family: "Jost", sans-serif;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--tt-champagne-deep);
}

/* ==========================================================
   Deeper Roots — expandable depth, deep green, gold sprout
   ========================================================== */
.tt-deeper {
  margin: 2em 0;
  border-radius: var(--tt-radius);
  background: var(--tt-ink);
  background-image: radial-gradient(circle at 88% 0%, rgba(194, 160, 60, 0.10), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(95, 167, 155, 0.12), transparent 45%);
  color: #F4EFE3;
  overflow: hidden;
}
.tt-deeper__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
}
.tt-deeper__summary::-webkit-details-marker { display: none; }
.tt-deeper__sprout {
  color: var(--tt-champagne);
  flex-shrink: 0;
}
.tt-deeper__leaf {
  opacity: 0;
  transform-origin: 12px 12px;
  transform: scale(0.6);
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}
.tt-deeper[open] .tt-deeper__leaf {
  opacity: 1;
  transform: scale(1);
}
.tt-deeper__stem {
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
  transition: stroke-dashoffset 0.3s ease;
}
.tt-deeper[open] .tt-deeper__stem { stroke-dashoffset: 0; }
.tt-deeper__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.tt-deeper__kicker {
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-champagne);
}
.tt-deeper__title {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #F8F4E9;
}
.tt-deeper__teaser {
  font-size: 0.88rem;
  color: rgba(244, 239, 227, 0.75);
}
.tt-deeper__hint {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--tt-champagne);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.tt-deeper[open] .tt-deeper__hint { transform: rotate(180deg); }
.tt-deeper__body {
  padding: 0.2rem 1.3rem 1.4rem 3.5rem;
  font-size: 0.96rem;
  line-height: 1.8;
  animation: tt-deeper-unfurl 0.4s ease both;
}
.tt-deeper__body p { color: rgba(248, 244, 233, 0.92); }
.tt-deeper__body p:last-child { margin-bottom: 0; }
.tt-deeper__body a {
  color: var(--tt-water, #5FA79B);
  border-bottom: 1px solid var(--tt-champagne);
}
.tt-deeper__body a:hover { color: var(--tt-champagne); }
.tt-deeper__body ul,
.tt-deeper__body ol { color: rgba(248, 244, 233, 0.92); }
@keyframes tt-deeper-unfurl {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 640px) {
  .tt-deeper__body { padding-left: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-deeper__body { animation: none; }
  .tt-deeper__leaf,
  .tt-deeper__stem,
  .tt-deeper__hint { transition: none; }
}

.tt-callout {
  border-radius: var(--tt-radius);
  padding: 1.1rem 1.3rem;
  margin: 1.8em 0;
  font-size: 0.95rem;
  line-height: 1.75;
}
.tt-callout p:last-child { margin-bottom: 0; }
.tt-callout--try {
  background: var(--tt-water-tint);
}
.tt-callout--try .tt-callout-kicker { color: var(--tt-teal); }
.tt-callout--note {
  background: #FBF7EC;
}
.tt-callout--note div { color: var(--tt-champagne-text); }

.tt-faq {
  border-bottom: 0.5px solid var(--tt-hairline);
  padding: 0.2rem 0;
}
.tt-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
  font-size: 1rem;
  color: var(--tt-ink);
  font-weight: 500;
}
.tt-faq summary::-webkit-details-marker { display: none; }
.tt-faq summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid var(--tt-teal);
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
}
.tt-faq[open] summary::after {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--tt-champagne-deep);
}
.tt-faq__answer {
  padding: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--tt-body-neutral);
}

.tt-author-card {
  max-width: 680px;
  margin: 0 auto 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  padding: 1.2rem 1.4rem;
}
.tt-author-card__avatar { width: 60px; height: 60px; }
.tt-author-card__body { flex: 1; min-width: 0; }
.tt-author-card__name {
  font-family: var(--tt-font-display);
  font-size: 1.15rem;
  color: var(--tt-ink);
  margin: 0;
}
.tt-author-card__tagline {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--tt-sage-mute);
  margin: 0.15rem 0 0;
}
.tt-author-card .tt-btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .tt-author-card { flex-wrap: wrap; }
  .tt-author-card .tt-btn { width: 100%; text-align: center; }
}

/* Writing elsewhere — external publication links */
.tt-elsewhere {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.tt-elsewhere li {
  border-bottom: 0.5px solid var(--tt-hairline);
}
.tt-elsewhere a {
  display: block;
  padding: 0.65rem 0.2rem;
  font-family: var(--tt-font-display);
  font-size: 1.05rem;
  color: var(--tt-ink);
}
.tt-elsewhere a:hover { color: var(--tt-teal); }
.tt-elsewhere a span { color: var(--tt-champagne-deep); font-size: 0.85em; }

/* ==========================================================
   23. Email capture — quiz gate, promo band, footer form
   ========================================================== */
.tt-quiz__gate-row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.tt-quiz__gate-row input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 0.75rem 0.9rem;
  font-family: var(--tt-font-body);
  font-size: 0.95rem;
  color: var(--tt-ink);
  background: var(--tt-ivory);
  border: 0.5px solid #D8D3C4;
  border-radius: var(--tt-radius);
}
.tt-quiz__gate-row input[type="email"]:focus {
  outline: none;
  border-color: var(--tt-teal);
}
.tt-quiz__consent,
.tt-footer2__sub-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--tt-sage-mute);
}
.tt-quiz__consent input,
.tt-footer2__sub-consent input {
  margin-top: 0.2rem;
  accent-color: var(--tt-teal);
  flex-shrink: 0;
}
.tt-quiz__consent a { color: var(--tt-teal); }
.tt-quiz__gate-error {
  color: var(--tt-clay);
  font-size: 0.88rem;
  margin-top: 0.7rem;
}

/* Home page quiz promo band */
.tt-quizpromo { padding: 0 0 clamp(2.2rem, 5vw, 3.5rem); background: var(--tt-ivory); }
.tt-quizpromo__panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  background: var(--tt-water);
  border: 0.5px solid #C9E2DA;
  border-left: 3px solid var(--tt-champagne);
  border-radius: 0 6px 6px 0;
  padding: clamp(1.5rem, 4vw, 2.4rem);
}
.tt-quizpromo__panel .tt-btn { white-space: nowrap; }
@media (max-width: 680px) {
  .tt-quizpromo__panel { flex-direction: column; align-items: flex-start; }
}

/* Footer subscribe */
.tt-footer2__subscribe { margin-top: 0.4rem; }
.tt-footer2__sub-row {
  display: flex;
  gap: 0.5rem;
}
.tt-footer2__sub-row input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  font-family: var(--tt-font-body);
  font-size: 0.88rem;
  color: var(--tt-ink);
  background: #F5F7F3;
  border: 0.5px solid rgba(198, 161, 91, 0.4);
  border-radius: var(--tt-radius);
}
.tt-footer2__sub-row .tt-btn { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
.tt-footer2__sub-consent { color: #9FBBB0; }
.tt-footer2__sub-consent a { color: var(--tt-champagne); }
.tt-footer2__sub-ok { color: #A9D9C4; font-size: 0.9rem; }
.tt-footer2__sub-err { color: #E8B4A8; font-size: 0.85rem; }

/* ==========================================================
   24. Find your fit + quiz card side by side
   ========================================================== */
.tt-fit-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.6rem;
  align-items: stretch;
}
.tt-fit-grid .tt-matcher {
  max-width: none;
  margin: 0;
}
.tt-quizcard {
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-top: 2px solid var(--tt-champagne);
  border-radius: var(--tt-radius);
  padding: 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tt-quizcard__title {
  font-size: 1.45rem;
  margin: 0 0 0.5rem;
}
.tt-quizcard__text {
  font-size: 0.93rem;
  color: var(--tt-sage-mute);
  line-height: 1.7;
  margin: 0 0 0.8rem;
}
.tt-quizcard__art {
  width: 130px;
  height: auto;
  margin: 0 0 1rem;
}
.tt-quizcard .tt-btn { margin-top: auto; }
@media (max-width: 820px) {
  .tt-fit-grid { grid-template-columns: 1fr; }
  .tt-quizcard { align-items: stretch; text-align: center; }
  .tt-quizcard__art { margin: 0 auto 1rem; }
  .tt-quizcard .tt-btn { text-align: center; }
}

/* ==========================================================
   25. On the bookshelf — recommended books
   ========================================================== */
.tt-bookshelf__intro {
  color: var(--tt-sage-mute);
  font-size: 0.95rem;
  margin-top: -0.4rem;
}
.tt-bookshelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.3rem;
  margin-top: 1.2rem;
}
.tt-book {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.tt-book__cover {
  flex-shrink: 0;
  width: 92px;
  height: 132px;
  border-radius: var(--tt-radius) 6px 6px 2px;
  border-left: 5px solid rgba(0, 0, 0, 0.12);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease;
  box-shadow: inset -6px 0 8px -6px rgba(0, 0, 0, 0.18);
}
.tt-book:hover .tt-book__cover { transform: translateY(-3px) rotate(-1deg); }
.tt-book__cover--0 { background: #1F6E62; border-left-color: #14524A; }
.tt-book__cover--1 { background: #C6A15B; border-left-color: #A08040; }
.tt-book__cover--2 { background: #123F38; border-left-color: #0C2B26; }
.tt-book__cover-title {
  font-family: var(--tt-font-display);
  font-size: 0.78rem;
  line-height: 1.3;
  color: #FBF7EC;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-book__cover-author {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 247, 236, 0.75);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-book__body { min-width: 0; }
.tt-book__title {
  font-family: var(--tt-font-display);
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--tt-ink);
  margin: 0;
}
.tt-book__author {
  font-size: 0.8rem;
  color: var(--tt-sage-mute);
  margin: 0.15rem 0 0;
}
.tt-book__note {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--tt-body-neutral);
  margin: 0.5rem 0 0;
}
.tt-book__link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--tt-champagne-deep);
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 1px;
}
.tt-book__link:hover { color: var(--tt-champagne-text); }
.tt-bookshelf__disclosure {
  font-size: 0.75rem;
  color: var(--tt-sage-mute);
  font-style: italic;
  margin-top: 1.2rem;
}

/* Bookshelf real cover images */
.tt-book__cover--img {
  padding: 0;
  background: var(--tt-water);
  overflow: hidden;
  display: block;
}
.tt-book__cover--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Layered book cover: image sits over the generated cover, falls back on error */
.tt-book__cover { position: relative; }
.tt-book__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Join page login line */
.tt-join__login {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 0.5px solid var(--tt-hairline);
  font-size: 0.9rem;
  color: var(--tt-sage-mute);
}
.tt-join__login a {
  color: var(--tt-champagne-deep);
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 1px;
}

/* ==========================================================
   26. Header actions — join, login, get matched
   ========================================================== */
.tt-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}
.tt-header__join {
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem;
}
.tt-header__login {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--tt-teal-hover);
}
.tt-header__login:hover { color: var(--tt-champagne-deep); }
.tt-header__cta {
  padding: 0.7rem 1.4rem;
  font-size: 0.88rem;
}
@media (max-width: 1080px) {
  .tt-header__join, .tt-header__login { display: none; }
}
@media (max-width: 820px) {
  .tt-header__actions .tt-header__cta { display: none; }
  /* Mobile: join and login live in the menu instead */
  .tt-nav .tt-nav__extra { border-top: 0.5px solid var(--tt-hairline); margin-top: 0.6rem; padding-top: 0.9rem; display: flex; align-items: center; gap: 1.1rem; }
  .tt-nav__login { font-size: 0.85rem; letter-spacing: 0.06em; color: var(--tt-teal-hover); text-decoration: none; }
  .tt-nav__login:hover { color: var(--tt-champagne-deep); }
}

/* Join/Log in inside the menu exist only on mobile (header buttons cover desktop) */
@media (min-width: 821px) {
  .tt-nav__mobile-only { display: none; }
}
@media (max-width: 1080px) and (min-width: 821px) {
  /* Mid widths: header keeps Join + Log in visible now that Get Matched is gone */
  .tt-header__join, .tt-header__login { display: inline-block; }
}

/* ==========================================================
   27. Location filter chips
   ========================================================== */
.tt-locbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.tt-locbar__chip {
  border: 0.5px solid #D8D3C4;
  color: var(--tt-sage-mute);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  transition: all 0.15s ease;
}
.tt-locbar__chip:hover {
  border-color: var(--tt-teal);
  color: var(--tt-ink);
}
.tt-locbar__chip.is-active {
  background: var(--tt-teal);
  border-color: var(--tt-teal);
  color: var(--tt-ivory);
}

/* Session type is a secondary filter under the city chips. Its own row,
   smaller chips, and a champagne active state so the two bars read as a
   hierarchy rather than two competing sets of the same control. */
.tt-modebar {
  margin-top: 0.55rem;
}
.tt-modebar .tt-locbar__chip {
  font-size: 0.76rem;
  padding: 0.34rem 0.85rem;
}
.tt-modebar .tt-locbar__chip.is-active {
  background: var(--tt-champagne-tint);
  border-color: var(--tt-champagne);
  color: var(--tt-champagne-text);
}

/* Jetpack Related Posts — styled into the essay layout */
.tt-related {
  max-width: 680px;
  margin: 0 auto 2.5rem;
}
.tt-related h3.jp-relatedposts-headline,
.tt-related .jp-relatedposts-headline em {
  font-family: var(--tt-font-body) !important;
  font-style: normal;
  font-size: 0.72rem !important;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep) !important;
  border: 0 !important;
}
.tt-related .jp-relatedposts-post-title a {
  font-family: var(--tt-font-display) !important;
  font-size: 1.1rem !important;
  color: var(--tt-ink) !important;
  text-decoration: none !important;
}
.tt-related .jp-relatedposts-post-title a:hover { color: var(--tt-teal) !important; }
.tt-related .jp-relatedposts-post-date,
.tt-related .jp-relatedposts-post-context {
  color: var(--tt-sage-mute) !important;
  font-size: 0.8rem !important;
}
.tt-related div.jp-relatedposts { border-top: 0.5px solid var(--tt-hairline); padding-top: 1rem; }

/* Byline, reviewer line, share row */
.tt-essay__byline {
  color: var(--tt-teal-hover);
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 1px;
}
.tt-essay__byline:hover { color: var(--tt-champagne-deep); }
.tt-essay__reviewed {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--tt-sage-mute);
  margin: 0.5rem 0 0;
}
.tt-essay__reviewed a { color: var(--tt-teal); }

.tt-share {
  max-width: 680px;
  margin: 0 auto 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 0.5px solid var(--tt-hairline);
  padding-top: 1rem;
}
.tt-share__label {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
}
.tt-share a {
  font-size: 0.85rem;
  color: var(--tt-teal-hover);
}
.tt-share a:hover { color: var(--tt-champagne-deep); }

/* ==========================================================
   28. Types of Therapy map feature band — theme-native
   ========================================================== */
#tth-map-feature {
  background: var(--tt-water);
  overflow-x: clip;
}
#tth-map-feature .tth-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.2rem) 24px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
#tth-map-feature .tth-mark svg {
  width: min(100%, 240px);
  height: auto;
  display: block;
  margin: 0 auto;
}
#tth-map-feature .tth-orbit { animation: tth-orbit 16s linear infinite; }
#tth-map-feature .tth-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: tth-breathe 4s ease-in-out infinite;
}
@keyframes tth-orbit { to { stroke-dashoffset: -160; } }
@keyframes tth-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) {
  #tth-map-feature .tth-orbit,
  #tth-map-feature .tth-pulse { animation: none; }
}
#tth-map-feature .tth-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tt-champagne-deep);
  margin: 0 0 0.8rem;
}
#tth-map-feature h2 {
  font-family: var(--tt-font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  color: var(--tt-ink);
  margin: 0 0 0.5rem;
}
#tth-map-feature .tth-tag {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--tt-champagne-deep);
  margin: 0 0 1rem;
}
#tth-map-feature p.tth-body {
  color: var(--tt-body);
  font-size: 0.97rem;
  line-height: 1.75;
  max-width: 36em;
  margin: 0 0 1.6rem;
}
#tth-map-feature .tth-btns {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  flex-wrap: wrap;
}
#tth-map-feature .tth-btn {
  display: inline-block;
  background: var(--tt-champagne);
  color: var(--tt-ink);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 0.8rem 1.6rem;
  border-radius: var(--tt-radius);
  text-decoration: none;
  transition: background 0.15s ease;
}
#tth-map-feature .tth-btn:hover {
  background: #D4B36F;
  color: var(--tt-ink);
}
#tth-map-feature .tth-link {
  color: var(--tt-teal-hover);
  font-weight: 400;
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 2px;
  transition: color 0.15s ease;
}
#tth-map-feature .tth-link:hover {
  color: var(--tt-champagne-deep);
  border-color: var(--tt-champagne-deep);
}
@media (max-width: 860px) {
  #tth-map-feature .tth-wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: clamp(2.5rem, 8vw, 3.5rem) 24px;
  }
  #tth-map-feature .tth-mark svg { width: min(55%, 190px); }
}

/* ==========================================================
   29. About page
   ========================================================== */
.tt-abouthero {
  background: var(--tt-water);
  padding: var(--tt-space-section) 0;
}
.tt-abouthero__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.tt-abouthero__title {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  color: var(--tt-ink);
  margin: 0 0 1.2rem;
}
.tt-abouthero__lede {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--tt-body);
  max-width: 38em;
  margin: 0 0 1.4rem;
}
.tt-abouthero__breath {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--tt-champagne-deep);
  margin: 0;
}
.tt-abouthero__mark svg {
  width: min(100%, 320px);
  height: auto;
  display: block;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .tt-abouthero__grid { grid-template-columns: 1fr; }
  .tt-abouthero__mark svg { width: min(62%, 230px); }
}

/* ==========================================================
   The bindu: a point, a triangle, a mandala.
   Every selector is scoped under .tt-bindu, because the class
   names inside are short enough to collide with anything.
   ========================================================== */
@keyframes tt-bindu-draw { to { stroke-dashoffset: 0; } }
@keyframes tt-bindu-fade { to { opacity: 1; } }
@keyframes tt-bindu-glow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.55); opacity: 0.1; }
}
@keyframes tt-bindu-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.tt-bindu .tt-bindu__dr {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: tt-bindu-draw var(--t, 1.1s) ease-out var(--d) forwards;
}
.tt-bindu .tt-bindu__fd {
  opacity: 0;
  animation: tt-bindu-fade 0.9s ease-out var(--d) forwards;
}
.tt-bindu .tt-bindu__halo {
  transform-origin: 340px 355px;
  animation: tt-bindu-glow 4.2s ease-in-out var(--d) infinite;
}
.tt-bindu .tt-bindu__point {
  transform-origin: 340px 355px;
  animation: tt-bindu-beat 4.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tt-bindu .tt-bindu__dr { stroke-dashoffset: 0; animation: none; }
  .tt-bindu .tt-bindu__fd { opacity: 1; animation: none; }
  .tt-bindu .tt-bindu__halo,
  .tt-bindu .tt-bindu__point { animation: none; }
}

/* Collective */
.tt-collective {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.tt-collective__text h2 { margin-bottom: 1rem; }
.tt-collective__text p {
  line-height: 1.8;
  margin: 0 0 1rem;
  max-width: 40em;
}
.tt-collective__quote {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--tt-ink);
  border-left: 2px solid var(--tt-champagne);
  padding: 0.3rem 0 0.3rem 1.2rem;
  margin: 1.4rem 0;
}
.tt-collective__panel {
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-top: 2px solid var(--tt-champagne);
  border-radius: var(--tt-radius);
  padding: 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 90px;
}
.tt-collective__stat {
  margin: 0;
  font-family: var(--tt-font-display);
  font-size: 1.25rem;
  color: var(--tt-ink);
  border-bottom: 0.5px solid var(--tt-hairline);
  padding-bottom: 0.8rem;
}
.tt-collective__stat span {
  display: block;
  font-family: var(--tt-font-body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  margin-bottom: 0.2rem;
}
.tt-collective__panel .tt-btn { margin-top: 0.4rem; text-align: center; }
@media (max-width: 820px) {
  .tt-collective { grid-template-columns: 1fr; }
  .tt-collective__panel { position: static; }
}

/* Systems + audience cards */
.tt-aboutsystem {
  background: var(--tt-ivory);
  padding: var(--tt-space-section) 0;
  border-top: 0.5px solid var(--tt-hairline);
}
.tt-aboutsystem__head {
  max-width: 640px;
  margin: 0 auto 2.4rem;
  text-align: center;
}
.tt-aboutsystem__head h2 { margin-bottom: 0.9rem; }
.tt-aboutsystem__head p { line-height: 1.8; color: var(--tt-body); }
.tt-audgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.3rem;
}
.tt-audcard {
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  padding: 1.6rem 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tt-audcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(18, 63, 56, 0.08);
}
.tt-audcard svg {
  width: 42px;
  height: 42px;
  margin-bottom: 0.9rem;
}
.tt-audcard h3 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}
.tt-audcard p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--tt-body-neutral);
  margin: 0;
}

/* Care split */
.tt-caresplit {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.tt-caresplit__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
}
.tt-caresplit__card {
  background: var(--tt-water-tint);
  border-radius: var(--tt-radius);
  padding: 1.6rem 1.5rem;
}
.tt-caresplit__card h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.tt-caresplit__card p { font-size: 0.92rem; line-height: 1.7; color: var(--tt-body-neutral); margin: 0; }
@media (max-width: 820px) {
  .tt-caresplit { grid-template-columns: 1fr; }
  .tt-caresplit__cards { grid-template-columns: 1fr; }
}

/* About FAQ */
.tt-aboutfaq {
  background: var(--tt-ivory);
  padding: var(--tt-space-section) 0;
  border-top: 0.5px solid var(--tt-hairline);
}
.tt-aboutfaq__inner { max-width: 720px; }
.tt-aboutfaq h2 { margin-bottom: 1.6rem; }

/* ==========================================================
   30. Guide pages — frame for embedded guide content
   ========================================================== */
.tt-guidehead {
  background: var(--tt-water);
  padding: clamp(2.4rem, 6vw, 3.8rem) 0 clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.tt-guidehead__title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.12;
  color: var(--tt-ink);
  margin: 0 auto 0.8rem;
  max-width: 16em;
}
.tt-guidehead__lede {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--tt-body);
  max-width: 40em;
  margin: 0 auto;
}
.tt-guidehead__rule {
  width: 56px;
  height: 2px;
  background: var(--tt-champagne);
  margin: 1.6rem auto 0;
}

/* The embedded content canvas: hands-off. No prose styling imposed;
   the page's own code governs itself. */
.tt-guidebody {
  background: var(--tt-ivory);
}
.tt-guidebody > * {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* Full-bleed blocks (Custom HTML sections that set their own width,
   and any block using alignfull) get the whole viewport. */
.tt-guidebody > .alignfull,
.tt-guidebody > section,
.tt-guidebody > div[id],
.tt-guidebody > figure.wp-block-html {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.tt-guidebody > .alignwide { max-width: 1200px; }

/* ==========================================================
   31. Supervisors page
   ========================================================== */
.tt-supgroup { margin-bottom: clamp(2rem, 5vw, 3rem); }
.tt-supgroup__title {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--tt-ink);
  border-bottom: 0.5px solid var(--tt-hairline);
  padding-bottom: 0.6rem;
  margin-bottom: 1.4rem;
}
.tt-supgroup__title span {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 0.75em;
  color: var(--tt-champagne-deep);
}

/* ==========================================================
   32. The office — address, click-to-call, boutique map
   ========================================================== */
.tt-office {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.6rem;
  align-items: stretch;
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  overflow: hidden;
}
.tt-office__details {
  padding: 1.8rem 0 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.tt-office__address {
  font-family: var(--tt-font-display);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--tt-ink);
  margin: 0;
}
.tt-office__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--tt-champagne-deep);
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 2px;
}
.tt-office__phone svg { width: 17px; height: 17px; }
.tt-office__phone:hover { color: var(--tt-champagne-text); }
.tt-office__directions {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--tt-teal-hover);
  margin-top: auto;
}
.tt-office__directions span { color: var(--tt-champagne-deep); }
.tt-office__directions:hover { color: var(--tt-champagne-deep); }
.tt-office__map {
  min-height: 260px;
}
.tt-office__map iframe {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
  display: block;
  filter: grayscale(0.85) sepia(0.14) contrast(0.92) brightness(1.02);
  transition: filter 0.4s ease;
}
.tt-office__map:hover iframe { filter: none; }
@media (max-width: 700px) {
  .tt-office { grid-template-columns: 1fr; }
  .tt-office__details { padding: 1.5rem 1.5rem 0.4rem; }
  .tt-office__map { min-height: 220px; }
  .tt-office__map iframe { min-height: 220px; }
}

/* Practice website line */
.tt-profile-website {
  text-align: center;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  margin: 1.6rem 0 0;
}
.tt-profile-website a {
  color: var(--tt-teal-hover);
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 2px;
}
.tt-profile-website a span { color: var(--tt-champagne-deep); }
.tt-profile-website a:hover { color: var(--tt-champagne-deep); }

/* Practice website inside the office card */
.tt-office__site {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--tt-teal-hover);
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 2px;
}
.tt-office__site span { color: var(--tt-champagne-deep); }
.tt-office__site:hover { color: var(--tt-champagne-deep); }

/* ==========================================================
   33. Events — community calendar
   ========================================================== */
.tt-events { display: flex; flex-direction: column; gap: 1.1rem; }
.tt-events__month {
  font-size: 1.3rem;
  color: var(--tt-ink);
  margin: 1.6rem 0 0.2rem;
  border-bottom: 0.5px solid var(--tt-hairline);
  padding-bottom: 0.5rem;
}
.tt-event {
  display: flex;
  gap: 1.3rem;
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  padding: 1.3rem 1.5rem;
}
.tt-event--cancelled { opacity: 0.72; }
.tt-event--cancelled .tt-event__title { text-decoration: line-through; text-decoration-color: var(--tt-clay); text-decoration-thickness: 1px; }
.tt-event__date {
  flex-shrink: 0;
  width: 62px;
  height: 68px;
  background: var(--tt-water);
  border-radius: var(--tt-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tt-event__day {
  font-family: var(--tt-font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--tt-ink);
}
.tt-event__month {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tt-teal-hover);
  margin-top: 0.2rem;
}
.tt-event__body { min-width: 0; flex: 1; }
.tt-event__topline { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.tt-event__badge {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.tt-event__badge--public { background: var(--tt-water); color: var(--tt-teal-hover); }
.tt-event__badge--pro { background: #FBF7EC; color: var(--tt-champagne-text); border: 0.5px solid #E5DFCE; }
.tt-event__badge--cancelled { background: #F7E9E4; color: var(--tt-clay); }
.tt-event__title { font-size: 1.25rem; margin: 0 0 0.25rem; }
.tt-event__meta { font-size: 0.85rem; color: var(--tt-sage-mute); margin: 0 0 0.5rem; }
.tt-evmeta-date, .tt-evmeta-time, .tt-evmeta-place {
  display: inline;
  background: none;
  padding: 0;
  border: 0;
  color: inherit;
  width: auto;
  height: auto;
}
.tt-evmeta-time::before,
.tt-evmeta-place::before { content: "\00B7"; margin: 0 0.45em; color: var(--tt-champagne); }
@media (max-width: 600px) {
  .tt-evmeta-date, .tt-evmeta-time {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
    color: var(--tt-ink);
  }
  .tt-evmeta-time::before { content: none; }
  .tt-evmeta-time { margin-top: 0.2rem; }
  .tt-evmeta-place { display: block; margin-top: 0.2rem; color: var(--tt-ink); }
  .tt-evmeta-place::before { content: none; }
}
.tt-event__desc { font-size: 0.93rem; line-height: 1.7; color: var(--tt-body-neutral); margin: 0 0 0.7rem; max-width: 56em; }
.tt-event__links { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; font-size: 0.83rem; margin: 0; }
.tt-event__host { color: var(--tt-teal-hover); }
.tt-event__host:hover { color: var(--tt-champagne-deep); }
.tt-event__signup {
  color: var(--tt-champagne-deep);
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 1px;
  font-weight: 500;
}
.tt-event__cal { color: var(--tt-sage-mute); }
.tt-event__cal:hover { color: var(--tt-teal); }
.tt-events__all { margin-top: 1.2rem; font-size: 0.9rem; }
.tt-events__all a { color: var(--tt-teal-hover); }
@media (max-width: 560px) {
  .tt-event { flex-direction: row; padding: 1.1rem 1.2rem; }
  .tt-event__date { width: 54px; height: 60px; }
}

/* ==========================================================
   34. Book cards — community bookshelf + article strips
   ========================================================== */
.tt-bookgroup { margin-top: clamp(2rem, 5vw, 3rem); }
.tt-bookgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
}
.tt-bookcard {
  display: flex;
  gap: 1.1rem;
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  padding: 1.2rem;
}
.tt-bookcard__coverlink { flex-shrink: 0; }
.tt-bookcard__coverlink img,
.tt-bookcard__generated {
  width: 84px;
  height: 122px;
  object-fit: cover;
  border-radius: var(--tt-radius);
  box-shadow: 2px 3px 10px rgba(18, 63, 56, 0.16);
  display: block;
}
.tt-bookcard__generated {
  background: var(--tt-teal);
  border-left: 4px solid rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  padding: 0.5rem;
}
.tt-bookcard__generated span {
  font-family: var(--tt-font-display);
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--tt-ivory);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-bookcard__title {
  font-family: var(--tt-font-display);
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--tt-ink);
  display: block;
  margin-bottom: 0.15rem;
}
.tt-bookcard__title:hover { color: var(--tt-teal); }
.tt-bookcard__author {
  font-size: 0.82rem;
  color: var(--tt-sage-mute);
  margin: 0 0 0.5rem;
}
.tt-bookcard__rec {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--tt-body-neutral);
  font-style: italic;
  margin: 0 0 0.4rem;
}
.tt-bookcard__rec a {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--tt-champagne-deep);
  white-space: nowrap;
}

/* Compact cards in the article strip */
.tt-relatedbooks {
  max-width: 680px;
  margin: 0 auto 2rem;
  border-top: 0.5px solid var(--tt-hairline);
  padding-top: 1.6rem;
}
.tt-relatedbooks__title {
  font-size: 1.3rem;
  margin: 0 0 0.15rem;
}
.tt-relatedbooks__sub {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  margin: 0 0 1.1rem;
}
.tt-relatedbooks__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.tt-bookcard--compact { padding: 0.9rem; gap: 0.9rem; }
.tt-bookcard--compact .tt-bookcard__coverlink img,
.tt-bookcard--compact .tt-bookcard__generated { width: 62px; height: 90px; }
.tt-bookcard--compact .tt-bookcard__title { font-size: 0.95rem; }
.tt-relatedbooks__all { font-size: 0.88rem; margin: 1rem 0 0.3rem; }
.tt-relatedbooks__all a { color: var(--tt-teal-hover); }
.tt-relatedbooks .tt-books-disclosure { font-size: 0.7rem; }
@media (max-width: 560px) {
  .tt-relatedbooks__grid { grid-template-columns: 1fr; }
}

/* Join form agreement checkbox */
.tt-join__agree {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--tt-sage-mute);
  margin: 0.4rem 0 1.2rem;
  cursor: pointer;
}
.tt-join__agree input {
  margin-top: 0.25rem;
  flex-shrink: 0;
  accent-color: var(--tt-teal);
}
.tt-join__agree a {
  color: var(--tt-teal-hover);
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 1px;
}
.tt-join__agree a:hover { color: var(--tt-champagne-deep); }

/* ==========================================================
   35. Journal quote rail — Instagram-style squares
   ========================================================== */
.tt-igrail {
  margin-top: 2rem;
  position: relative;
}
.tt-igrail__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.4rem 0 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tt-igrail__track::-webkit-scrollbar { display: none; }

.tt-igcard {
  flex: 0 0 min(62vw, 240px);
  min-width: 0;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  border-radius: var(--tt-radius-card);
  padding: clamp(1.4rem, 4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(18, 63, 56, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.tt-igcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(18, 63, 56, 0.16);
}
.tt-igcard__kicker {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: auto;
}
.tt-igcard__quote {
  font-family: var(--tt-font-display);
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 1.4;
  margin: 1rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-igcard__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.tt-igcard__brand {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.tt-igcard__read {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Variants — rotating brand treatments */
.tt-igcard--ink { background: var(--tt-ink); }
.tt-igcard--ink .tt-igcard__kicker,
.tt-igcard--ink .tt-igcard__read { color: var(--tt-champagne); }
.tt-igcard--ink .tt-igcard__quote { color: #F5F1E6; }
.tt-igcard--ink .tt-igcard__brand { color: #7FA79C; }

.tt-igcard--water { background: var(--tt-water); }
.tt-igcard--water .tt-igcard__kicker,
.tt-igcard--water .tt-igcard__read { color: var(--tt-champagne-deep); }
.tt-igcard--water .tt-igcard__quote { color: var(--tt-ink); }
.tt-igcard--water .tt-igcard__brand { color: var(--tt-teal-hover); }

.tt-igcard--ivory {
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-top: 3px solid var(--tt-champagne);
}
.tt-igcard--ivory .tt-igcard__kicker,
.tt-igcard--ivory .tt-igcard__read { color: var(--tt-champagne-deep); }
.tt-igcard--ivory .tt-igcard__quote { color: var(--tt-ink); }
.tt-igcard--ivory .tt-igcard__brand { color: var(--tt-sage-mute); }

.tt-igcard--teal { background: var(--tt-teal); }
.tt-igcard--teal .tt-igcard__kicker,
.tt-igcard--teal .tt-igcard__read { color: var(--tt-champagne); }
.tt-igcard--teal .tt-igcard__quote { color: var(--tt-ivory); }
.tt-igcard--teal .tt-igcard__brand { color: #BFDCD4; }

/* Dots */
.tt-igrail__dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.2rem;
}
.tt-igrail__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(92, 111, 102, 0.45);
  transition: background 0.2s ease, transform 0.2s ease;
}
.tt-igrail__dots span.is-active {
  background: var(--tt-champagne-deep);
  transform: scale(1.25);
}


/* Three squares spanning the full width of the header rule */
@media (min-width: 821px) {
  .tt-igcard { flex-basis: calc((100% - 2rem) / 3); }
}

/* Header side: All posts + Instagram square */
.tt-journal__headside {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.tt-igbtn {
  width: 40px;
  height: 40px;
  border-radius: var(--tt-radius-card);
  background: var(--tt-champagne);
  color: var(--tt-teal-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.tt-igbtn svg { width: 22px; height: 22px; }
.tt-igbtn:hover {
  background: #D4B36F;
  color: var(--tt-ink);
  transform: translateY(-2px);
}

/* Blank full-image squares */
.tt-igcard--img {
  padding: 0;
  background: var(--tt-water);
}
.tt-igcard--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.tt-igcard--img:hover img { transform: scale(1.03); }

/* Follow card */
.tt-igcard--follow {
  background: var(--tt-teal);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tt-igcard__igframe {
  width: 54px;
  height: 54px;
  border: 2px solid var(--tt-champagne);
  border-radius: 15px;
  color: var(--tt-champagne);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.tt-igcard__igframe svg { width: 32px; height: 32px; }
.tt-igcard--follow .tt-igcard__followtext {
  font-family: var(--tt-font-display);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--tt-ivory);
}
.tt-igcard--follow .tt-igcard__handle {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--tt-champagne);
  margin-top: 0.4rem;
}

/* ==========================================================
   36. Front-page bookshelf band
   ========================================================== */

.tt-shelfband {
  background: var(--tt-ivory);
  border-top: 0.5px solid var(--tt-hairline);
  padding: var(--tt-space-section) 0;
}
.tt-shelfband__head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 2.4rem;
}
.tt-shelfband__head h2 { margin-bottom: 0.6rem; }
.tt-shelfband__lede {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--tt-champagne-deep);
  margin: 0;
}
.tt-shelf {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.2rem;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.4rem 0.2rem 1rem;

  /* Centering an overflow row with justify-content pushes the first items
     to a negative offset, and a scroll container cannot reach past its own
     origin, so those books become unreachable. `safe center` fixes that,
     but in any browser without `safe` support the whole declaration is
     invalid and plain `center` comes back, taking the scrolling with it.
     Sizing the track to its content and centering it with auto margins
     does the same job with no alignment keyword involved, so the row
     centers while it fits and scrolls from origin once it does not. */
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* A slim gold bar, because a row that scrolls with no scrollbar and no
   cut-off card gives the reader no reason to think there is more. */
.tt-shelf { scrollbar-width: thin; scrollbar-color: rgba(198,161,91,0.5) transparent; }
/* A single gold shelf line under the row and one consistent shadow under
   every cover: the covers arrive in every publisher color there is, so
   the presentation is what makes them read as one curated shelf. */
.tt-shelfband .tt-shelf {
  border-bottom: 2px solid var(--tt-champagne);
  padding-bottom: 1.4rem;
}
.tt-shelfband .tt-shelf__book img {
  box-shadow: 0 10px 22px rgba(18, 63, 56, 0.16), 0 2px 5px rgba(18, 63, 56, 0.1);
  border-radius: 2px;
}
.tt-shelf::-webkit-scrollbar { height: 6px; }
.tt-shelf::-webkit-scrollbar-thumb {
  background: rgba(198,161,91,0.5);
  border-radius: 999px;
}
.tt-shelf::-webkit-scrollbar-thumb:hover { background: rgba(198,161,91,0.75); }
.tt-shelf::-webkit-scrollbar-track { background: transparent; }
.tt-shelf__book {
  flex: 0 0 200px;
  scroll-snap-align: start;
  text-align: center;
}
.tt-shelf__cover {
  display: block;
  transition: transform 0.25s ease;
}
.tt-shelf__cover:hover { transform: translateY(-6px); }
.tt-shelf__cover img,
.tt-shelf__generated {
  width: 200px;
  height: 290px;
  object-fit: cover;
  border-radius: var(--tt-radius);
  box-shadow: 0 14px 30px rgba(18, 63, 56, 0.20), 2px 4px 10px rgba(18, 63, 56, 0.12);
  display: block;
  margin: 0 auto;
}
.tt-shelf__generated {
  background: var(--tt-teal);
  border-left: 5px solid rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  padding: 0.8rem;
}
.tt-shelf__generated span {
  font-family: var(--tt-font-display);
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--tt-ivory);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-shelf__title {
  font-family: var(--tt-font-display);
  font-size: 1.06rem;
  line-height: 1.35;
  color: var(--tt-ink);
  margin: 0.9rem 0 0.2rem;
}
.tt-shelf__rec {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--tt-sage-mute);
  margin: 0;
}
.tt-shelf__rec a {
  color: var(--tt-champagne-deep);
  border-bottom: 1px solid var(--tt-champagne);
  padding-bottom: 1px;
}
.tt-shelf__rec a:hover { color: var(--tt-champagne-text); }
.tt-shelfband__all {
  text-align: center;
  margin: 2rem 0 0;
  font-size: 0.92rem;
}
.tt-shelfband__all a { color: var(--tt-teal-hover); }
.tt-shelfband__all a:hover { color: var(--tt-champagne-deep); }
@media (max-width: 700px) {
  .tt-shelf { justify-content: flex-start; }
}

/* Rail: page alignment on desktop, center-snap on mobile */
@media (min-width: 821px) {
  .tt-igcard { scroll-snap-align: start; }
}

/* Marquee shelf: left-aligned drift, no snap fighting the animation */
.tt-shelf.is-marquee {
  justify-content: flex-start;
  scroll-snap-type: none;
}

/* Bookshelf button */
.tt-shelfband__all .tt-btn { display: inline-block; }


/* Compact follow card typography */
.tt-igcard--follow .tt-igcard__followtext { font-size: 1rem; }
.tt-igcard__igframe { width: 46px; height: 46px; margin-bottom: 0.7rem; }
.tt-igcard__igframe svg { width: 27px; height: 27px; }

/* Bigger books on mobile too, still swipeable */
@media (max-width: 700px) {
  .tt-shelf__book { flex-basis: 172px; }
  .tt-shelf__cover img,
  .tt-shelf__generated { width: 172px; height: 250px; }
}

/* State filter chips (supervisors, reusable) */
.tt-filterchips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.tt-chip {
  font-family: var(--tt-font-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 1rem;
  border: 1px solid var(--tt-hairline);
  border-radius: 999px;
  background: var(--tt-white);
  color: var(--tt-teal-hover);
  cursor: pointer;
  transition: all 0.15s ease;
}
.tt-chip:hover { border-color: var(--tt-champagne); color: var(--tt-champagne-deep); }
.tt-chip.is-active {
  background: var(--tt-teal);
  border-color: var(--tt-teal);
  color: var(--tt-ivory);
}

/* Supervisors: search + card meta */
.tt-supsearch { margin: 0 0 1rem; }
.tt-supsearch input {
  width: 100%;
  max-width: 480px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--tt-hairline);
  border-radius: 999px;
  font-family: var(--tt-font-body);
  font-size: 0.9rem;
  background: var(--tt-white);
  color: var(--tt-ink);
}
.tt-supsearch input:focus {
  outline: none;
  border-color: var(--tt-champagne);
}
/* The location line is part of the card: a quiet footer band */
.tt-supcard .tt-card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
.tt-supcard:hover .tt-card { border-color: var(--tt-champagne); }
.tt-supmeta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.75rem 1.3rem 0.9rem;
  /* v1.66.17 — one uninterrupted white card; the location row is
     simply its last line, no seam at all. */
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-top: 0;
  border-radius: 0 0 var(--tt-radius-card) var(--tt-radius-card);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tt-teal-hover);
  transition: border-color 0.2s ease;
}
.tt-supcard:hover .tt-supmeta { border-color: var(--tt-champagne); border-top: 0; }
.tt-supmeta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tt-champagne);
  flex-shrink: 0;
}
.tt-supmeta span { color: var(--tt-champagne-deep); }
.tt-supcard { margin-bottom: 1.4rem; }

/* Events: location line above each card */
.tt-evwrap { margin-bottom: 0.4rem; }
.tt-evloc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.35rem 0.2rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-teal-hover);
}
.tt-evloc__pin {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tt-champagne);
  flex-shrink: 0;
}
.tt-evloc__online {
  background: var(--tt-water);
  color: var(--tt-teal-hover);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  letter-spacing: 0.08em;
}

/* Events: location browse + sections + pills */
.tt-evbrowse {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.tt-evbrowse__label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
}
.tt-evbrowse__select {
  min-width: 280px;
  max-width: 100%;
  padding: 0.65rem 2.4rem 0.65rem 1rem;
  border: 1px solid var(--tt-hairline);
  border-radius: 999px;
  background: var(--tt-white);
  font-family: var(--tt-font-body);
  font-size: 0.9rem;
  color: var(--tt-ink);
  cursor: pointer;
}
.tt-evbrowse__select:focus {
  outline: none;
  border-color: var(--tt-champagne);
}

.tt-evsection--online {
  background: var(--tt-water);
  border-radius: var(--tt-radius-card);
  padding: 1.4rem 1.4rem 0.9rem;
  margin-bottom: 2.2rem;
}
.tt-evsection__title {
  font-family: var(--tt-font-display);
  font-size: 1.35rem;
  color: var(--tt-ink);
  margin: 0 0 1rem;
}
.tt-evsection__title span {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--tt-teal-hover);
  margin-left: 0.5rem;
}

.tt-evwrap {
  position: relative;
  margin-bottom: 1rem;
}
.tt-evpill {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-teal-hover);
  background: var(--tt-water);
  border: 1px solid var(--tt-water);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  pointer-events: none;
}
.tt-evpill--online {
  color: var(--tt-ivory);
  background: var(--tt-teal);
  border-color: var(--tt-teal);
}
@media (max-width: 600px) {
  .tt-evpill { position: static; display: inline-block; margin: 0 0 0.4rem; }
}

/* Profile share button + popover */
.tt-share { position: relative; display: inline-block; margin: 0.2rem 0 0.6rem; }
.tt-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 1rem;
  border: 1px solid var(--tt-champagne);
  border-radius: 999px;
  background: transparent;
  color: var(--tt-champagne-deep);
  font-family: var(--tt-font-body);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tt-share__btn:hover { background: var(--tt-champagne); color: var(--tt-ivory); }
.tt-share__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 170px;
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-top: 3px solid var(--tt-champagne);
  border-radius: var(--tt-radius-card);
  box-shadow: 0 14px 34px rgba(18, 63, 56, 0.12);
  padding: 0.4rem;
}
.tt-share__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.9rem;
  border: 0;
  background: none;
  color: var(--tt-ink);
  font-family: var(--tt-font-body);
  font-size: 0.86rem;
  border-radius: var(--tt-radius);
  cursor: pointer;
  text-decoration: none;
}
.tt-share__item:hover { background: var(--tt-water); color: var(--tt-teal-hover); }

/* Platform-hosted community events */
.tt-event__badge--community {
  background: var(--tt-ivory);
  color: var(--tt-champagne-deep);
  border: 1px solid var(--tt-champagne);
}
.tt-event__host--platform {
  color: var(--tt-champagne-deep);
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Co-facilitator credit on event cards */
.tt-event__cofac {
  font-family: var(--tt-font-display);
  font-style: italic;
  color: var(--tt-sage-mute);
  font-size: 0.95rem;
}

.tt-event__cofac a {
  color: var(--tt-teal);
  text-decoration: none;
  border-bottom: 1px solid var(--tt-champagne);
}
.tt-event__cofac a:hover { color: var(--tt-champagne-deep); }

/* Event share action */
.tt-event__sharelink {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--tt-font-body);
  font-size: inherit;
  color: var(--tt-champagne-deep);
  border-bottom: 1px solid var(--tt-champagne);
  transition: color 0.15s ease;
}
.tt-event__sharelink:hover { color: var(--tt-teal); }

/* Children's & teens shelf */
.tt-bookshelf__young {
  font-family: var(--tt-font-display);
  font-size: 1.15rem;
  color: var(--tt-ink);
  margin: 1.8rem 0 0.9rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--tt-hairline);
}

/* Book covers: designed text-cover beneath, photo overlays when it loads */
.tt-bookcard__coverlink, .tt-shelf__cover { position: relative; overflow: hidden; }
.tt-cover-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The house shelf: Triangle Therapist's own recommendations */
.tt-houseshelf {
  background: var(--tt-water);
  border-radius: var(--tt-radius-card);
  padding: 1.6rem 1.6rem 1.2rem;
  margin: 1.6rem 0 2.4rem;
}
/* The row bleeds to the panel edges, so a part-visible cover reads as
   "there is more this way" rather than a card clipped by mistake, and
   the first book still lines up with the heading above it. */
.tt-houseshelf .tt-shelf {
  margin-inline: -1.6rem;
  padding-inline: 1.6rem;
  scroll-padding-inline: 1.6rem;
}
.tt-houseshelf__title {
  font-family: var(--tt-font-display);
  font-size: 1.5rem;
  color: var(--tt-ink);
  margin: 0 0 0.3rem;
}
.tt-houseshelf__lede {
  font-family: var(--tt-font-display);
  font-style: italic;
  color: var(--tt-teal-hover);
  margin: 0 0 1.2rem;
}
.tt-houseshelf .tt-bookcard { background: var(--tt-white); }
.tt-houseshelf__by {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  margin: 0.4rem 0 0;
}

/* House shelf as a scrolling band */
.tt-shelf--house { margin-top: 0.4rem; }
.tt-houseshelf__note {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--tt-ink);
  margin: 0.15rem 0 0;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-houseshelf .tt-houseshelf__by { margin-top: 0; }

/* Shelf titles are links, styled like themselves */
.tt-shelf__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tt-shelf__title a:hover { color: var(--tt-champagne-deep); }

/* Bookshelf page: standing shelves with planks and plaques */
.tt-shelfcase {
  position: relative;
  margin: 0 0 3.4rem;
  padding-bottom: 2.6rem;
}
.tt-shelfcase .tt-shelf {
  position: relative;
  z-index: 1;
  align-items: flex-end;
}
.tt-shelfcase .tt-shelf__book { margin-bottom: 0; }
.tt-shelfcase .tt-plank {
  position: absolute;
  left: 0;
  right: 0;
  top: 288px;
  height: 14px;
  background: var(--tt-champagne);
  border-top: 2px solid var(--tt-champagne-deep);
  border-radius: var(--tt-radius);
  z-index: 0;
}
.tt-shelfcase .tt-plaque {
  position: absolute;
  left: 18px;
  top: 279px;
  z-index: 2;
  background: var(--tt-ink);
  color: #F0DFB8;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  padding: 0.28rem 0.9rem;
  border-radius: var(--tt-radius);
}
.tt-shelfcase .tt-shelf__title { margin-top: 1.6rem; }
.tt-houseshelf .tt-shelfcase { margin-bottom: 0.6rem; }
@media (max-width: 640px) {
  .tt-shelfcase .tt-plank { top: 248px; }
  .tt-shelfcase .tt-plaque { top: 239px; }
}

/* House shelf notes: white cards, plain readable text like the topic sections */
.tt-shelf__note {
  font-family: var(--tt-font-body);
  font-style: normal;
  font-size: 0.86rem;
  color: var(--tt-ink);
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  margin: 0.5rem auto 0;
  max-width: 220px;
  line-height: 1.55;
  text-align: left;
}

/* Membership: preview ribbon, plans, price strip */
.tt-feespreview {
  background: #FDF3F2;
  border: 2px dashed #B02E2E;
  border-radius: var(--tt-radius-card);
  padding: 0.8rem 1.2rem;
  margin: 0 0 1.8rem;
  color: #B02E2E;
  font-size: 0.9rem;
}
.tt-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  align-items: stretch;
}
.tt-plan {
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius-card);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
}
.tt-plan--featured {
  border-top: 4px solid var(--tt-champagne);
  box-shadow: 0 18px 44px rgba(18, 63, 56, 0.10);
}
.tt-plan__name {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  margin: 0 0 0.6rem;
}
.tt-plan__price {
  font-family: var(--tt-font-display);
  font-size: 2.4rem;
  color: var(--tt-ink);
  margin: 0 0 0.2rem;
}
.tt-plan__price small { font-size: 1rem; color: var(--tt-sage-mute); }
.tt-plan__sub {
  font-family: var(--tt-font-display);
  font-style: italic;
  color: var(--tt-sage-mute);
  margin: 0 0 1.2rem;
}
.tt-plan__list {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  flex: 1;
}
.tt-plan__list li {
  padding: 0.4rem 0 0.4rem 1.6rem;
  position: relative;
  color: var(--tt-ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.tt-plan__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--tt-teal);
}
.tt-plan__annual {
  display: block;
  margin-top: 0.7rem;
  text-align: center;
  color: var(--tt-teal);
  font-size: 0.88rem;
}
.tt-plan__note {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--tt-sage-mute);
  text-align: center;
}
.tt-planfaq {
  max-width: 680px;
  margin: 3.4rem auto 0;
}
.tt-planfaq h2 {
  font-family: var(--tt-font-display);
  color: var(--tt-ink);
  margin-bottom: 1rem;
}
.tt-planfaq p { color: var(--tt-ink); line-height: 1.7; }
.tt-pricestrip {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  align-items: center;
  background: var(--tt-water);
  border-radius: var(--tt-radius-card);
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
}
.tt-pricestrip__item { min-width: 200px; }
.tt-pricestrip__label {
  display: block;
  line-height: 1.5;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
}
/* Block, like the label and the annual line, and with its own leading.
   Left inline at the body's 1.7, a 1.5rem serif builds a 41px line box
   around 17px of glyph, and the surplus falls below the baseline rather
   than around it. The column then stands taller than anything visible
   in it, so centring the button against that column reads as the button
   sitting high. Tight leading makes the box the size of its ink. */
.tt-pricestrip__price {
  display: block;
  line-height: 1.25;
  font-family: var(--tt-font-display);
  font-size: 1.5rem;
  color: var(--tt-ink);
}
.tt-pricestrip__price small { font-size: 0.9rem; color: var(--tt-sage-mute); }
.tt-pricestrip__alt {
  display: block;
  line-height: 1.5;
  font-size: 0.82rem;
  color: var(--tt-teal-hover);
}
/* Blank when the annual price is switched off, and an empty block still
   claims a line. Nothing invisible should push the row off centre. */
.tt-pricestrip__alt:empty { display: none; }
.tt-pricestrip__more { margin-left: auto; align-self: center; }

/* Connect button + referral page cards */
.tt-connbtn { border:1px solid var(--tt-teal); background:none; color:var(--tt-teal); border-radius:999px; padding:0.45rem 1.1rem; font-family:var(--tt-font-body); font-size:0.85rem; cursor:pointer; }
.tt-connbtn--done { border-color:var(--tt-hairline); color:var(--tt-sage-mute); cursor:default; }
.tt-refgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem; }
.tt-refcard { background:var(--tt-white); border:0.5px solid var(--tt-hairline); border-radius: var(--tt-radius-card); padding:1.6rem; text-align:center; display:flex; flex-direction:column; gap:0.4rem; }
.tt-refcard__photo { width:110px; height:110px; object-fit:cover; border-radius:50%; margin:0 auto 0.6rem; border:3px solid var(--tt-champagne); }
.tt-refcard__name { font-family:var(--tt-font-display); font-size:1.25rem; color:var(--tt-ink); margin:0; }
.tt-refcard__cred { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--tt-champagne-deep); margin:0; }
.tt-refcard__tag { font-family:var(--tt-font-display); font-style:italic; color:var(--tt-sage-mute); margin:0.2rem 0; }
.tt-refcard__av { font-size:0.8rem; color:var(--tt-teal); margin:0 0 0.6rem; }
.tt-refcard .tt-btn { margin-top:auto; }

/* Footer logo: the real lockup, filtered to pure ivory */
.tt-footlogo img {
  /* width, not max-width: small uploads scale UP to the lockup size
     instead of rendering at their tiny intrinsic width. Sized to hold
     its own against the footer's large tagline type. */
  width: 400px;
  max-width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 600px) {
  .tt-footlogo img { width: 280px; }
}

/* Footer wordmark: the drawn ivory lockup (default when no footer logo uploaded) */
.tt-footlock { display: inline-block; }
.tt-footwordmark {
  display: block;
  font-family: var(--tt-font-display);
  font-size: 1.65rem;
  letter-spacing: 0.28em;
  color: var(--tt-ivory);
  white-space: nowrap;
}
.tt-footwordmark__tri {
  display: inline-block;
  width: 0.82em;
  height: 0.72em;
  margin: -0.13em 0.1em 0 -0.14em;
  vertical-align: 0;
  color: var(--tt-ivory);
}
.tt-footwordmark__sub {
  display: flex;
  justify-content: space-between;
  padding: 0 17% 0 13%;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--tt-ivory);
}

/* Consult form: payment & insurance section */
.tt-consult__pay {
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius-card);
  padding: 1rem 1.2rem 1.1rem;
  margin: 1.2rem 0 0.4rem;
}
.tt-consult__pay legend {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep);
  padding: 0 0.5rem;
}
.tt-consult__payopts { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.tt-payopt { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; color: var(--tt-ink); }
.tt-payopt input[type="checkbox"] {
  accent-color: var(--tt-ink);
}
#tt-ins-wrap { margin-top: 0.4rem; }
#tt-ins-other { margin-top: 0.5rem; max-width: 320px; }
.tt-consult__insnote {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 0.84rem;
  color: var(--tt-sage-mute);
  margin: 0.7rem 0 0;
}
.tt-consult__payreq { color: #B02E2E; font-size: 0.88rem; margin: 0.5rem 0 0; }

/* License verified badge */
.tt-licrow { border-bottom: none !important; padding-top: 0 !important; margin-top: -0.3rem; }
.tt-licbadge {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: #9AA39C;
}

.tt-verifynote {
  max-width: 44em;
  margin: 2.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 0.5px solid var(--tt-hairline);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--tt-sage-mute);
}
.tt-verifynote a {
  color: var(--tt-sage-mute);
  border-bottom: 1px solid rgba(198, 161, 91, 0.45);
  padding-bottom: 1px;
}
.tt-verifynote a:hover {
  color: var(--tt-champagne-text);
  border-bottom-color: var(--tt-champagne);
}

.tt-author-card__trust {
  margin: 0.5rem 0 0;
  font-size: 0.74rem;
  color: var(--tt-sage-mute);
}
.tt-author-card__trust a {
  color: var(--tt-sage-mute);
  border-bottom: 1px solid rgba(198, 161, 91, 0.45);
}
.tt-author-card__trust a:hover { color: var(--tt-champagne-text); }

.tt-licbadge--link {
  color: #9AA39C;
  border-bottom: 1px solid rgba(198, 161, 91, 0.5);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tt-licbadge--link:hover {
  color: var(--tt-champagne-text);
  border-bottom-color: var(--tt-champagne);
}

/* Reporting */
.tt-reportlink { font-size: 0.78rem; color: var(--tt-sage-mute); text-decoration: underline; }
.tt-profile-report { display: inline-block; margin-left: 1rem; }

/* Insurance pills in the details card */
.tt-insrow { align-items: flex-start !important; }
.tt-inspills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  max-width: 70%;
}
.tt-inspill {
  display: inline-block;
  background: var(--tt-water);
  color: var(--tt-teal);
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Bookshelf at scale: toolbar, tabs, badges, folding */
.tt-bookbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--tt-ivory) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 0.5px solid var(--tt-hairline);
  padding: 0.9rem 0 0.7rem;
  margin: 1.4rem 0 1.8rem;
}
.tt-bookbar__search { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.7rem; }
#tt-booksearch {
  flex: 1;
  max-width: 460px;
  border: 0.5px solid var(--tt-hairline);
  border-radius: 999px;
  background: var(--tt-white);
  padding: 0.6rem 1.2rem;
  font-family: var(--tt-font-body);
  font-size: 0.95rem;
  color: var(--tt-ink);
}
#tt-booksearch:focus { outline: none; border-color: var(--tt-champagne); }
.tt-bookbar__total { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-champagne-deep); white-space: nowrap; }
.tt-bookbar__tabs { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.tt-booktab {
  border: 0.5px solid var(--tt-hairline);
  background: var(--tt-white);
  color: var(--tt-ink);
  border-radius: 999px;
  padding: 0.32rem 0.9rem;
  font-family: var(--tt-font-body);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tt-booktab span { color: var(--tt-sage-mute); font-size: 0.72rem; margin-left: 0.2rem; }
.tt-booktab:hover { border-color: var(--tt-champagne); }
.tt-booktab.is-active { background: var(--tt-ink); border-color: var(--tt-ink); color: var(--tt-ivory); }
.tt-booktab.is-active span { color: var(--tt-champagne); }
.tt-bookcard__count {
  display: inline-block;
  background: #F6EFDF;
  color: var(--tt-champagne-deep);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.12rem 0.6rem;
  margin: 0.2rem 0 0.3rem;
}
.tt-bookcard__all summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--tt-teal);
  margin: 0.3rem 0 0.2rem;
}
.tt-bookcard__all summary::marker { color: var(--tt-champagne); }
.tt-foldhide, .tt-searchhide { display: none !important; }
.tt-bookmore { text-align: center; margin: 1.2rem 0 0; }
.tt-booknone { text-align: center; font-family: var(--tt-font-display); font-style: italic; color: var(--tt-sage-mute); padding: 2rem 0; }


/* Newsletter cards & footer identity */
.tt-nlcard {
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius-card);
  padding: 1.8rem 2rem;
  margin: 2.6rem auto;
  max-width: 560px;
  text-align: center;
}
.tt-nlcard__kicker {
  font-family: var(--tt-font-display);
  font-size: 1.3rem;
  color: var(--tt-ink);
  margin: 0 0 0.3rem;
}
.tt-nlcard__tagline { font-size: 0.9rem; color: var(--tt-sage-mute); margin: 0 0 0.5rem; }
.tt-nlcard__gift {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--tt-champagne-deep);
  margin: 0 0 1rem;
}
.tt-nlcard__row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.tt-nlcard__row input[type="email"] {
  flex: 1;
  min-width: 220px;
  max-width: 320px;
  border: 0.5px solid var(--tt-hairline);
  border-radius: 999px;
  padding: 0.65rem 1.2rem;
  font-family: var(--tt-font-body);
}
.tt-nlcard__consent { display: block; margin-top: 0.8rem; font-size: 0.72rem; color: var(--tt-sage-mute); text-align: left; }
.tt-nlcard__consent input { accent-color: var(--tt-ink); margin-right: 0.3rem; }
.tt-nlcard__ok { font-family: var(--tt-font-display); font-style: italic; color: var(--tt-teal); }
.tt-footer2__nlname { font-family: var(--tt-font-display); font-size: 1.05rem; color: var(--tt-ivory); margin: 1.1rem 0 0.15rem; }
.tt-footer2__nltag { font-size: 0.78rem; color: rgba(250, 249, 244, 0.75); margin: 0 0 0.6rem; }
.tt-consult__nloptin { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; color: var(--tt-sage-mute); margin: 0.9rem 0 0.2rem; }
.tt-consult__nloptin input { accent-color: var(--tt-ink); margin-top: 0.2rem; }

/* Consult terms agreement */
.tt-consult__agree { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; color: var(--tt-sage-mute); margin: 0.2rem 0 1rem; }
.tt-consult__agree input { accent-color: var(--tt-ink); margin-top: 0.2rem; flex-shrink: 0; }
.tt-consult__agree a { color: var(--tt-teal); text-decoration: underline; }

/* Bio events: calendar link as quiet water-teal chip */
.tt-events__all { margin-top: 1.2rem; }
.tt-events__all .tt-btn {
  display: inline-block;
  width: auto;
  background: var(--tt-water);
  border: none;
  color: var(--tt-teal);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
}
.tt-events__all .tt-btn:hover { background: var(--tt-teal); color: var(--tt-ivory); }

/* Footer: cities we serve */
.tt-footer2__cities {
  margin: 1.6rem 0 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(250, 249, 244, 0.14);
  font-size: 0.78rem;
  line-height: 2;
}
.tt-footer2__citylabel {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--tt-champagne);
  margin-right: 0.9rem;
}
.tt-footer2__cities a {
  color: rgba(250, 249, 244, 0.72);
  text-decoration: none;
  margin-right: 0.9rem;
  white-space: nowrap;
}
.tt-footer2__cities a:hover { color: var(--tt-champagne); }

/* Voice introduction chip */
.tt-voice {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: 999px;
  padding: 0.45rem 1.2rem 0.45rem 0.45rem;
  margin: 0.2rem 0 1.2rem;
  max-width: 100%;
}
.tt-voice__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--tt-teal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tt-voice__btn:hover { background: var(--tt-ink); transform: scale(1.05); }
.tt-voice__icon--play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--tt-ivory);
  margin-left: 3px;
}
.tt-voice__icon--pause {
  width: 12px;
  height: 15px;
  border-left: 4px solid var(--tt-ivory);
  border-right: 4px solid var(--tt-ivory);
}
.tt-voice__label {
  font-family: var(--tt-font-display);
  font-size: 0.98rem;
  color: var(--tt-ink);
  white-space: nowrap;
}
.tt-voice__time { color: var(--tt-sage-mute); font-size: 0.8rem; font-family: var(--tt-font-body); }
.tt-voice__track {
  width: 74px;
  height: 3px;
  border-radius: 999px;
  background: var(--tt-water);
  overflow: hidden;
  flex-shrink: 0;
}
.tt-voice__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tt-teal);
  border-radius: 999px;
  transition: width 0.2s linear;
}
.tt-voice.is-playing .tt-voice__track { background: #CBE4DC; }
@media (max-width: 480px) {
  .tt-voice__track { display: none; }
}

/* Inline book cards inside articles */
.tt-inlinebook {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius-card);
  padding: 1.3rem 1.5rem;
  margin: 1.8rem 0;
}
.tt-inlinebook__coverlink {
  position: relative;
  overflow: hidden;
  flex: 0 0 96px;
  display: block;
  border-radius: var(--tt-radius);
}
.tt-inlinebook__coverlink img,
.tt-inlinebook__generated {
  width: 96px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--tt-radius);
  display: block;
}
.tt-inlinebook__generated {
  background: var(--tt-water);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  font-family: var(--tt-font-display);
  font-size: 0.78rem;
  color: var(--tt-ink);
}
.tt-inlinebook__generated span { display: block; }
.tt-inlinebook__coverlink .tt-cover-live { position: absolute; inset: 0; }
.tt-inlinebook__body { flex: 1; min-width: 0; }
.tt-inlinebook__title { margin: 0 0 0.15rem; }
.tt-inlinebook__title a {
  font-family: var(--tt-font-display);
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--tt-ink);
  text-decoration: none;
}
.tt-inlinebook__title a:hover { color: var(--tt-teal); }
.tt-inlinebook__author { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--tt-sage-mute); }
.tt-inlinebook__note {
  margin: 0 0 0.8rem;
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tt-ink);
}
.tt-inlinebook__btn {
  display: inline-block;
  border: 1px solid var(--tt-champagne);
  color: var(--tt-champagne-deep);
  border-radius: 999px;
  padding: 0.35rem 1.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.2s ease;
}
.tt-inlinebook__btn:hover { background: var(--tt-water); color: var(--tt-teal); border-color: var(--tt-water); }
.tt-inlinebook__disclosure {
  font-size: 0.72rem;
  color: var(--tt-sage-mute);
  margin-top: 2rem;
}
@media (max-width: 480px) {
  .tt-inlinebook { gap: 1rem; padding: 1rem 1.1rem; }
  .tt-inlinebook__coverlink, .tt-inlinebook__coverlink img, .tt-inlinebook__generated { flex-basis: 76px; width: 76px; height: 112px; }
}

/* Related books strip in articles */
.tt-relbooks {
  margin: 3rem 0 2rem;
  padding: 2rem 2rem 1.8rem;
  background: var(--tt-white);
  border: 0.5px solid var(--tt-hairline);
  border-radius: var(--tt-radius-card);
  text-align: center;
}
.tt-relbooks__title {
  font-family: var(--tt-font-display);
  font-size: 1.35rem;
  color: var(--tt-ink);
  margin: 0 0 0.7rem;
}
.tt-relbooks__rule {
  display: block;
  width: 44px;
  border-top: 1px solid var(--tt-champagne);
  margin: 0 auto 1.6rem;
}
.tt-relbooks__grid {
  display: flex;
  gap: 1.8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.tt-relbooks__item { flex: 0 1 128px; }
.tt-relbooks__cover {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: var(--tt-radius);
  transition: transform 0.22s ease;
}
.tt-relbooks__cover:hover { transform: translateY(-4px); }
.tt-relbooks__cover img,
.tt-relbooks__cover .tt-inlinebook__generated {
  width: 128px;
  height: 186px;
}
.tt-relbooks__cover .tt-cover-live { position: absolute; inset: 0; }
.tt-relbooks__name { margin: 0.7rem 0 0; }
.tt-relbooks__name a {
  font-family: var(--tt-font-display);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--tt-ink);
  text-decoration: none;
}
.tt-relbooks__name a:hover { color: var(--tt-teal); }

/* Consult form: the therapist's face on the ask */
.tt-consult__who {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.tt-consult__who h2 { margin: 0; }
.tt-consult__face {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--tt-champagne);
  flex-shrink: 0;
}
html { scroll-behavior: smooth; }

/* While you wait: the parting shelf */
.tt-waitshelf {
  margin: 1.2rem 0 0.6rem;
  padding: 1.3rem 1.4rem 1.4rem;
  background: var(--tt-water);
  border-radius: var(--tt-radius-card);
  text-align: center;
}
.tt-waitshelf__lede {
  font-family: var(--tt-font-display);
  font-style: italic;
  color: var(--tt-ink);
  margin: 0 0 1rem;
}
.tt-waitshelf__row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  border-bottom: 2px solid var(--tt-champagne);
  padding-bottom: 0;
}
.tt-waitshelf__book img,
.tt-waitshelf__spine {
  width: 84px;
  height: 122px;
  object-fit: cover;
  border-radius: var(--tt-radius) 3px 0 0;
  display: block;
}
.tt-waitshelf__spine {
  background: var(--tt-white);
  font-family: var(--tt-font-display);
  font-size: 0.7rem;
  color: var(--tt-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.4rem;
}
.tt-waitshelf__book { transition: transform 0.2s ease; display: block; }
.tt-waitshelf__book:hover { transform: translateY(-4px); }
.tt-waitshelf__cta { margin: 1.1rem 0 0; }

/* Consult intro: room to breathe between heading and lede */
.tt-consult__who { margin-bottom: 0.9rem; }
.tt-consult__lede { margin: 0 0 1.4rem; line-height: 1.65; }
@media (max-width: 600px) {
  .tt-consult__who { margin-bottom: 1.1rem; }
  .tt-consult__lede { margin-bottom: 1.5rem; }
}

/* ==========================================================
   Language gate — the quiet matcher step and its honest dead end
   ========================================================== */
.tt-matcher__langwrap {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.tt-select {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  font-family: var(--tt-font-body, inherit);
  font-size: 0.95rem;
  color: var(--tt-ink);
  background: var(--tt-white);
  border: 1px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tt-teal) 50%), linear-gradient(135deg, var(--tt-teal) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.tt-select:focus {
  outline: 2px solid var(--tt-champagne);
  outline-offset: 2px;
}
.tt-matcher__done {
  flex: 0 0 auto;
}
.tt-matcher__note {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--tt-sage-mute);
}

.tt-nomatch {
  padding: 1.6rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--tt-champagne-tint);
  border: 1px solid var(--tt-champagne);
  border-radius: var(--tt-radius);
}
.tt-nomatch__title {
  margin: 0 0 0.6rem;
  font-family: var(--tt-font-display);
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--tt-ink);
}
.tt-nomatch__body {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tt-body-neutral);
}
.tt-nomatch__label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tt-champagne-text);
}
.tt-nomatch__list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.tt-option--sm {
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  text-decoration: none;
}
.tt-nomatch__actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}
.tt-nomatch__foot {
  margin: 1.1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--tt-sage-mute);
}

@media (max-width: 600px) {
  .tt-matcher__langwrap { flex-direction: column; align-items: stretch; }
  /* In a column, flex-basis becomes HEIGHT — the 15rem width basis from
     the desktop row was inflating the select to 240px tall. */
  .tt-matcher__langwrap .tt-select { flex: 0 0 auto; width: 100%; font-size: 1rem; }
  .tt-matcher__done { width: 100%; }
}


/* ==========================================================
   Print Shop / WooCommerce — the store in the site's clothes
   ========================================================== */
.tt-shop { background: #FAF9F4; }
.tt-shop .woocommerce-breadcrumb { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #A98545; margin-bottom: 1.6rem; }
.tt-shop .woocommerce-breadcrumb a { color: #A98545; text-decoration: none; }
.tt-shop .woocommerce-products-header__title,
.tt-shop .product_title { font-family: var(--tt-font-display, Georgia, serif); font-weight: 500; color: #123F38; }
.tt-shop .woocommerce-products-header__title { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 0.4rem; }

/* Grid: products as cream cards */
.tt-shop ul.products li.product {
  background: #FFFDF8; border: 1px solid #E4DECB; border-radius: var(--tt-radius-card);
  padding: 1rem 1rem 1.2rem; transition: box-shadow 0.2s, transform 0.2s;
}
.tt-shop ul.products li.product:hover { box-shadow: 0 10px 28px rgba(18, 63, 56, 0.10); transform: translateY(-2px); }
.tt-shop ul.products li.product img { border-radius: var(--tt-radius-card); }
.tt-shop ul.products li.product .woocommerce-loop-product__title { font-family: var(--tt-font-display, Georgia, serif); font-weight: 500; font-size: 1.08rem; color: #123F38; padding-top: 0.7rem; }
.tt-shop ul.products li.product .price { color: #A98545; font-size: 0.98rem; }
.tt-shop ul.products li.product .price del { color: #B9B2A0; }
.tt-shop span.onsale { background: #C6A15B; color: #123F38; border-radius: 999px; min-height: 0; line-height: 2.2; padding: 0 0.9em; font-size: 0.75rem; letter-spacing: 0.06em; }

/* Buttons: the site's pills, everywhere Woo puts a button. Woo's own
   stylesheet carries heavier selectors (button.button.alt) and painted
   these purple — hence the !important: a cascade war the brand must win. */
.tt-shop .button,
.tt-shop a.button,
.tt-shop button.button,
.tt-shop input.button,
.tt-shop button.button.alt,
.tt-shop a.button.alt,
.tt-shop .woocommerce-message .button,
.tt-shop #respond input#submit {
  background: #123F38 !important; color: #FFFDF8 !important; border: 0 !important; border-radius: 999px !important;
  padding: 0.65rem 1.5rem !important; font-weight: 500 !important; transition: background 0.15s;
}
.tt-shop .button:hover, .tt-shop a.button:hover, .tt-shop button.button:hover, .tt-shop button.button.alt:hover { background: #1A5148 !important; color: #FFFDF8 !important; }
.tt-shop button.single_add_to_cart_button,
.tt-shop button.single_add_to_cart_button.button.alt { background: #123F38 !important; color: #FFFDF8 !important; font-size: 1rem !important; }
.tt-shop button.single_add_to_cart_button:hover,
.tt-shop button.single_add_to_cart_button.button:hover,
.tt-shop button.single_add_to_cart_button.button.alt:hover { background: #C6A15B !important; color: #123F38 !important; }

/* Variation dropdowns + Clear link: the site's inputs, not the browser's */
.tt-shop table.variations select,
.tt-shop select {
  border: 1px solid #E4DECB; border-radius: var(--tt-radius-card); padding: 0.55rem 0.8rem;
  background: #fff; color: #123F38; font-size: 0.95rem; max-width: 100%;
}
.tt-shop table.variations label { color: #123F38; font-weight: 500; }
.tt-shop .reset_variations { color: #A98545; font-size: 0.82rem; }

/* The gallery hang: art alone, no thumbnail wall. The model selector
   swaps the image via Woo's own variation machinery. */
.tt-shop div.product div.images .flex-control-thumbs { display: none !important; }
.tt-shop div.product div.images { margin-bottom: 0.6rem; }
.tt-shop div.product div.images img { border-radius: var(--tt-radius); }

/* The placard: the poem beneath the image, set like gallery wall text */
.tt-shop div.product div.images .woocommerce-product-details__short-description {
  font-family: var(--tt-font-display, Georgia, serif);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.95;
  color: #40544E;
  text-align: center;
  max-width: 28em;
  margin: 1.6rem auto 0.6rem;
  padding-top: 1.4rem;
  position: relative;
}
.tt-shop div.product div.images .woocommerce-product-details__short-description::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 44px; height: 1px; background: #C6A15B;
}
.tt-shop div.product div.images .woocommerce-product-details__short-description p { margin: 0 0 0.4rem; }

/* Product meta: the SKU is plumbing, not poetry — hidden. Category stays. */
.tt-shop .product_meta .sku_wrapper { display: none; }

/* Product meta (SKU, category): present but quiet */
.tt-shop .product_meta { font-size: 0.78rem; letter-spacing: 0.04em; color: #8B9B94; border-top: 1px solid #EDE8DB; padding-top: 1rem; margin-top: 1.4rem; }
.tt-shop .product_meta a { color: #A98545; text-decoration: none; }

/* Single product */
.tt-shop div.product .price { color: #A98545; font-size: 1.35rem; font-family: var(--tt-font-display, Georgia, serif); }
.tt-shop div.product .price ins { text-decoration: none !important; }
.tt-shop div.product .price del { color: #C9C2AF; font-size: 0.85em; margin-right: 0.35em; }
.tt-shop div.product .woocommerce-product-details__short-description { color: #40544E; line-height: 1.7; }
.tt-shop div.product .quantity .qty { border: 1px solid #E4DECB; border-radius: var(--tt-radius-card); padding: 0.55rem 0.4rem; background: #fff; }
.tt-shop .woocommerce-tabs ul.tabs { padding-left: 0 !important; margin-left: 0 !important; }
.tt-shop .woocommerce-tabs ul.tabs li {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 1.6rem 0 0 !important; padding: 0 !important;
}
.tt-shop .woocommerce-tabs ul.tabs li a { color: #123F38 !important; padding: 0.5rem 0.1rem !important; font-weight: 500; letter-spacing: 0.02em; }
.tt-shop .woocommerce-tabs ul.tabs li a:hover { color: #A98545 !important; }
.tt-shop .woocommerce-tabs ul.tabs li.active { background: transparent !important; }
.tt-shop .woocommerce-tabs ul.tabs li.active a { color: #123F38 !important; border-bottom: 2px solid #C6A15B; }
.tt-shop .woocommerce-tabs ul.tabs::before { display: none !important; border: 0 !important; }
.tt-shop .woocommerce-tabs ul.tabs li::before, .tt-shop .woocommerce-tabs ul.tabs li::after { display: none !important; }
/* The tab already names the panel — the giant repeated heading goes */
.tt-shop .woocommerce-tabs .panel > h2:first-of-type { display: none; }
.tt-shop .woocommerce-tabs .panel h2 { font-family: var(--tt-font-display, Georgia, serif); font-weight: 500; color: #123F38; }
.tt-shop .related.products > h2, .tt-shop .upsells.products > h2 { font-family: var(--tt-font-display, Georgia, serif); font-weight: 500; color: #123F38; }
.tt-shop .star-rating, .tt-shop .star-rating span::before { color: #C6A15B; }

/* Notices in the brand voice */
.tt-shop .woocommerce-message, .tt-shop .woocommerce-info {
  background: #FFFDF8; border: 1px solid #E4DECB; border-top-color: #C6A15B; border-radius: var(--tt-radius-card); color: #40544E;
}
.tt-shop .woocommerce-message::before, .tt-shop .woocommerce-info::before { color: #C6A15B; }
.tt-shop .woocommerce-error { border-radius: var(--tt-radius-card); }

/* Cart + checkout */
.tt-shop table.shop_table { border: 1px solid #E4DECB; border-radius: var(--tt-radius-card); }
.tt-shop table.shop_table th { color: #123F38; }
.tt-shop form .form-row input.input-text, .tt-shop form .form-row textarea, .tt-shop .select2-container--default .select2-selection--single {
  border: 1px solid #E4DECB; border-radius: var(--tt-radius-card); padding: 0.6rem 0.8rem; background: #fff;
}
@media (max-width: 600px) {
  .tt-shop ul.products li.product { padding: 0.7rem 0.7rem 0.9rem; }
}

/* ------------------------------------------------------------
   Hero card — the photo floats on the therapist's card art
   (v1.64.69). Softened veils the art; Full strength lets it sing.
   ------------------------------------------------------------ */
.tt-herocard {
	display: block;
	position: relative;
	width: 232px;
	aspect-ratio: 2 / 3;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid #C6A15B;
	box-shadow: 0 1px 0 rgba(198, 161, 91, 0.3), 0 16px 36px rgba(18, 63, 56, 0.22);
	background: linear-gradient(160deg, #123F38, #1A5148 55%, #C6A15B 160%);
	text-decoration: none;
}
.tt-herocard__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease;
}
.tt-herocard__art,
.tt-herocard--soft .tt-herocard__art {
	/* The art panels are assigned per therapist, so any one card can land
	   a loud composition. A real blur turns whatever arrives into
	   atmosphere behind the person, and the settle animation eases from
	   sharp into soft on load, so the softness reads as a choice being
	   made rather than a broken image. Applies to every mode: the old
	   Softened/Full toggle no longer gates it, since a sharp art panel
	   always competes with the person. */
	filter: blur(7px) saturate(0.82) brightness(0.94);
	transform: scale(1.12);
	animation: tt-artsettle 1.6s ease-out;
	transition: filter 0.9s ease, transform 0.9s ease;
}
@keyframes tt-artsettle {
	from {
		filter: blur(0) saturate(1) brightness(1);
		transform: scale(1.04);
	}
}
/* The intentional reveal: resting the pointer lets the art breathe back
   toward clarity, so seeing the picture behind is something the visitor
   does, not something that happens to them. */
.tt-herocard:hover .tt-herocard__art,
.tt-herocard:focus-visible .tt-herocard__art {
	filter: blur(2px) saturate(0.95) brightness(1);
	transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
	.tt-herocard__art {
		animation: none;
	}
}
.tt-herocard__veil {
	position: absolute;
	inset: 0;
	/* Spotlight for every mode: clear where the face sits, spruce pressing
	   in from the edges, the bottom gradient keeping Save Contact legible. */
	background:
		radial-gradient(60% 46% at 50% 38%, rgba(18, 63, 56, 0) 34%, rgba(18, 63, 56, 0.46) 100%),
		linear-gradient(to top, rgba(18, 63, 56, 0.72) 0%, rgba(18, 63, 56, 0.18) 46%, rgba(18, 63, 56, 0.06) 100%);
	transition: opacity 0.9s ease;
}
.tt-herocard:hover .tt-herocard__veil,
.tt-herocard:focus-visible .tt-herocard__veil {
	opacity: 0.55;
}
.tt-herocard--soft .tt-herocard__veil {
	/* A spotlight instead of a flat wash: clear where the face sits, spruce
	   pressing in from the edges, so the eye lands on the person first. */
	background:
		radial-gradient(60% 46% at 50% 38%, rgba(18, 63, 56, 0) 34%, rgba(18, 63, 56, 0.46) 100%),
		linear-gradient(to top, rgba(18, 63, 56, 0.72) 0%, rgba(18, 63, 56, 0.18) 46%, rgba(18, 63, 56, 0.06) 100%);
	transition: opacity 0.9s ease;
}
.tt-herocard--soft:hover .tt-herocard__veil,
.tt-herocard--soft:focus-visible .tt-herocard__veil {
	opacity: 0.55;
}
.tt-herocard__face {
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translateX(-50%);
	width: 142px;
	height: 142px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #C6A15B;
	background: #FFFDF8;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}
.tt-herocard__face img,
.tt-herocard__face svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tt-herocard__meet {
	position: absolute;
	right: 12px;
	bottom: 12px;
	white-space: nowrap;
	background: rgba(18, 63, 56, 0.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #FFFDF8;
	border: 1px solid rgba(198, 161, 91, 0.75);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	padding: 6px 13px;
	border-radius: 999px;
	transition: background 0.3s ease, border-color 0.3s ease;
}
.tt-herocard:hover .tt-herocard__meet,
.tt-herocard:focus-visible .tt-herocard__meet {
	background: rgba(18, 63, 56, 0.85);
	border-color: #C6A15B;
}
@media (max-width: 782px) {
	.tt-herocard { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-herocard__art, .tt-herocard__meet { transition: none; }
	.tt-herocard:hover .tt-herocard__art, .tt-herocard--soft:hover .tt-herocard__art { transform: none; }
	.tt-herocard--soft .tt-herocard__art { transform: scale(1.05); }
}

/* Mobile intro order (v1.64.70): on phones the name greets first,
   then the hero card, then the facts. Desktop keeps the two-column
   composition where the card and name sit side by side. */
.tt-profile-intro-m { display: none; }
@media (max-width: 680px) {
	.tt-profile-intro-m { display: block; text-align: center; margin-bottom: 1.2rem; }
	.tt-profile-intro-d { display: none; }
	.tt-herocard { width: min(88vw, 330px); aspect-ratio: 9 / 10; margin: 0 auto 1.8rem; }
	.tt-herocard__face { width: 58%; height: auto; aspect-ratio: 1 / 1; top: 20%; }
	.tt-herocard__meet { font-size: 12.5px; padding: 7px 15px; right: 14px; bottom: 14px; }
	.tt-facts { max-width: 340px; margin-left: auto; margin-right: auto; }
}

/* ==========================================================
   THE TRIANGLE — the magazine (v1.66.0)

   A warm room, not a dark one. The canvas is sand and champagne;
   the deep green lives inside it, in the panels and the type, so
   the whole thing reads as one material rather than two.

   The artwork is never covered. Images run at full size and
   dissolve into the canvas at their lower edge, so nothing is
   clipped and nothing sits on top of the painting.
   ========================================================== */
:root {
  /* The canvas is the site's own light tones — ivory into the
     champagne tint — so the magazine blends with the theme by
     definition. Gold stays in the linework, not the walls. */
  --tt-mag-sand: #F6F2E6;        /* the canvas: between ivory & champagne-tint */
  --tt-mag-sand-light: #FAF9F4;  /* top of the wash: the site's ivory */
  --tt-mag-sand-deep: #F3EDDD;   /* foot of the wash: the theme's champagne-tint */
  --tt-mag-parchment: #FFFFFF;   /* raised cards */
  --tt-mag-forest: #123F38;      /* headlines, panels */
  --tt-mag-forest-deep: #0E332D;
  --tt-mag-forest-soft: #46695F; /* body copy on sand */
  --tt-mag-gold: #C6A15B;
  --tt-mag-gold-deep: #A08040;
  --tt-mag-gold-text: #7D6330;
  --tt-mag-hair: rgba(160, 128, 64, 0.24);
  --tt-mag-on-forest: #F1E7D3;
  --tt-mag-on-forest-soft: rgba(241, 231, 211, 0.72);
}

/* --- The canvas ----------------------------------------- */
/* The header and footer are never restyled by the magazine — they render
   exactly as the rest of the site. Only the page body carries the canvas. */
.tt-mag-world { background: var(--tt-mag-sand); }

.tt-mag {
  background:
    radial-gradient(105% 60% at 50% 0%, rgba(198, 161, 91, 0.10) 0%, transparent 58%),
    linear-gradient(178deg, var(--tt-mag-sand-light) 0%, var(--tt-mag-sand) 46%, var(--tt-mag-sand-deep) 100%);
  color: var(--tt-mag-forest-soft);
  padding: clamp(2.2rem, 5vw, 3.8rem) var(--tt-pad) clamp(3rem, 7vw, 5.5rem);
}
.tt-mag__inner { max-width: 1120px; margin: 0 auto; }

/* --- Masthead ------------------------------------------- */
.tt-mag-masthead { text-align: center; }
.tt-mag-masthead__city {
  font-family: var(--tt-font-body);
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--tt-mag-gold-deep);
  margin: 0 0 1.1rem;
}
.tt-mag-masthead__mark { margin: 0; line-height: 1; font-weight: 500; }
.tt-mag-wordmark {
  font-family: var(--tt-font-display);
  font-size: clamp(2.2rem, 6vw, 3rem);
  letter-spacing: 0.02em;
  color: var(--tt-mag-forest);
  display: inline-block;
}
.tt-mag-wordmark em { font-style: normal; color: var(--tt-mag-gold-deep); }


.tt-mag-masthead .tt-mag-ornament { margin: 1.3rem auto 0; }
.tt-mag-masthead__line {
  font-family: var(--tt-font-display);
  font-style: italic;
  max-width: 24ch;
  margin: 0 auto;
  font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  line-height: 1.28;
  color: var(--tt-mag-forest);
}

/* --- The signature: rule · dot · rule -------------------- */
.tt-mag-ornament { display: flex; align-items: center; justify-content: center; gap: 0.55rem; }
.tt-mag-ornament i {
  display: block;
  width: clamp(28px, 8vw, 54px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tt-mag-gold-deep));
}
.tt-mag-ornament b + i { background: linear-gradient(90deg, var(--tt-mag-gold-deep), transparent); }
.tt-mag-ornament b { width: 5px; height: 5px; border-radius: 50%; background: var(--tt-mag-gold-deep); }

/* --- The spine ------------------------------------------ */
.tt-mag-spine {
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 clamp(1.8rem, 4vw, 2.6rem);
  border-top: 0.5px solid var(--tt-mag-hair);
  border-bottom: 0.5px solid var(--tt-mag-hair);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* v1.67.3 — a visible, honest scroll: the row fades at the edges to
     say "there's more", and a slim gold scrollbar shows where you are. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 128, 64, 0.45) transparent;
}
.tt-mag-spine::-webkit-scrollbar { height: 4px; }
.tt-mag-spine::-webkit-scrollbar-track { background: transparent; }
.tt-mag-spine::-webkit-scrollbar-thumb { background: rgba(160, 128, 64, 0.45); border-radius: var(--tt-radius); }
.tt-mag-spine ul {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0.85rem 28px;
  min-width: max-content;
}
/* Centered when it fits, scrollable from the true start when it doesn't —
   auto margins on the ends do both, where justify-content: center would
   clip the left of an overflowing row. */
.tt-mag-spine li:first-child { margin-left: auto; }
.tt-mag-spine li:last-child { margin-right: auto; }
.tt-mag-spine a {
  font-family: var(--tt-font-body);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tt-mag-forest-soft);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.tt-mag-spine a:hover,
.tt-mag-spine a:focus-visible { color: var(--tt-mag-forest); border-bottom-color: var(--tt-mag-gold); }
.tt-mag-spine a[aria-current="page"] { color: var(--tt-mag-gold-text); border-bottom-color: var(--tt-mag-gold); }

/* --- Artwork, dissolving into the canvas ----------------- */
.tt-mag-art {
  display: block;
  position: relative;
  overflow: hidden;
}
.tt-mag-cover__art,
.tt-essay__art {
  display: block;
  position: relative;
  margin: 0;
  overflow: visible;
}
.tt-mag-cover__art img,
.tt-essay__art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: cover;
  /* The lower edge feathers away so the painting sits in the page
     rather than in a box, and no band ever covers it. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
}
/* A breath of gold across every image, so the art library and the
   palette read as one thing. Soft-light keeps every original hue. */
.tt-mag-cover__art::after,
.tt-essay__art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 20%, rgba(198, 161, 91, 0.22) 0%, rgba(198, 161, 91, 0.06) 55%, transparent 80%);
  mix-blend-mode: soft-light;
}

/* --- The cover ------------------------------------------ */
.tt-mag-kicker {
  font-family: var(--tt-font-body);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tt-mag-gold-text);
  margin: 0 0 0.9rem;
}
.tt-mag-kicker a { color: inherit; }
.tt-mag-kicker a:hover { color: var(--tt-mag-forest); }
.tt-mag-kicker span { opacity: 0.5; margin: 0 0.35rem; }

.tt-mag-cover { position: relative; }
.tt-mag-cover__band {
  position: relative;
  z-index: 2;
  max-width: 840px;
  margin: -3.5rem auto 0;
  padding: 0 clamp(0.4rem, 2vw, 1.5rem);
  text-align: center;
}
.tt-mag-cover--noart .tt-mag-cover__band { margin-top: 0; }
.tt-mag-cover__title {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.1;
  margin: 0 0 0.9rem;
}
.tt-mag-cover__title a { color: var(--tt-mag-forest); }
.tt-mag-cover__title a:hover { color: var(--tt-mag-gold-deep); }
.tt-mag-cover__deck {
  max-width: 56ch;
  margin: 0 auto 1.4rem;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  line-height: 1.66;
  color: var(--tt-mag-forest-soft);
}
.tt-mag-cover__band .tt-mag-byline { justify-content: center; }
.tt-mag-cover__cta { margin: 1.3rem 0 0; }

.tt-mag-readlink {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--tt-font-body);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tt-mag-gold-text);
  border-bottom: 1px solid var(--tt-mag-hair);
  padding-bottom: 0.4rem;
}
.tt-mag-readlink:hover { color: var(--tt-mag-forest); border-bottom-color: var(--tt-mag-gold); }
.tt-mag-readlink__min { opacity: 0.6; letter-spacing: 0.12em; }

/* --- Byline --------------------------------------------- */
.tt-mag-byline { display: flex; align-items: center; gap: 0.85rem; }
.tt-mag-byline__photo {
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 1px var(--tt-mag-gold), 0 0 0 4px rgba(198, 161, 91, 0.16);
}
.tt-mag-byline__photo img,
.tt-mag-byline__photo svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-mag-byline__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tt-mag-byline__name {
  font-family: var(--tt-font-display);
  font-size: 1.02rem;
  color: var(--tt-mag-forest);
}
.tt-mag-byline__name:hover { color: var(--tt-mag-gold-deep); }
.tt-mag-byline--house .tt-mag-byline__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(198, 161, 91, 0.14);
  color: var(--tt-mag-gold-deep);
}
.tt-mag-byline__mark { width: 24px; height: 24px; display: block; }
.tt-mag-byline__mark svg { width: 100%; height: 100%; display: block; }
/* an uploaded mark fills the ring the way a photo would */
.tt-mag-byline__logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-mag-byline--house .tt-mag-byline__photo:has(.tt-mag-byline__logo) {
  background: transparent;
  padding: 0;
}
/* On the green panels */
.tt-mag-byline--ink .tt-mag-byline__name { color: var(--tt-mag-on-forest); }
.tt-mag-byline--ink .tt-mag-byline__name:hover { color: var(--tt-mag-gold); }
.tt-mag-byline--ink.tt-mag-byline--house .tt-mag-byline__photo { color: var(--tt-mag-gold); background: rgba(198, 161, 91, 0.12); }

/* --- The interlude: deep green, inside the sand ---------- */
.tt-mag-interlude {
  position: relative;
  margin: clamp(2.6rem, 7vw, 4.4rem) 0;
  padding: clamp(2.4rem, 6vw, 3.6rem) clamp(1.4rem, 4vw, 3rem) clamp(2rem, 5vw, 3rem);
  background:
    radial-gradient(90% 120% at 82% 0%, rgba(198, 161, 91, 0.14) 0%, transparent 60%),
    linear-gradient(165deg, var(--tt-mag-forest) 0%, var(--tt-mag-forest-deep) 100%);
  text-align: center;
}
.tt-mag-interlude::before {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--tt-font-display);
  font-size: clamp(5rem, 12vw, 8rem);
  line-height: 1;
  color: var(--tt-mag-gold);
  opacity: 0.42;
  pointer-events: none;
}
.tt-mag-interlude blockquote { margin: 0; border: 0; padding: 0; }
.tt-mag-interlude__quote {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.42;
  color: var(--tt-mag-on-forest);
  margin: 0 0 1.1rem;
  max-width: 26ch;
  margin-inline: auto;
}
.tt-mag-interlude__from a {
  font-family: var(--tt-font-body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tt-mag-on-forest-soft);
}
.tt-mag-interlude__from a:hover { color: var(--tt-mag-gold); }
.tt-mag-interlude__from span { display: block; margin-top: 0.35rem; color: var(--tt-mag-gold); }

/* --- Shelves -------------------------------------------- */
.tt-mag-shelf { margin: clamp(2.6rem, 6vw, 4rem) 0 0; }
.tt-mag-shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 0.5px solid var(--tt-mag-hair);
  margin-bottom: 1.7rem;
}
.tt-mag-shelf__title {
  font-family: var(--tt-font-display);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.1;
  margin: 0;
}
.tt-mag-shelf__title a { color: var(--tt-mag-forest); }
.tt-mag-shelf__title a:hover { color: var(--tt-mag-gold-deep); }
.tt-mag-shelf__more {
  font-family: var(--tt-font-body);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tt-mag-gold-text);
  white-space: nowrap;
}
.tt-mag-shelf__more:hover { color: var(--tt-mag-forest); }
.tt-mag-shelf__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
}

.tt-mag-story { min-width: 0; }
.tt-mag-story__art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(160deg, var(--tt-mag-sand-deep), #EADFC6);
  margin-bottom: 0.95rem;
}
.tt-mag-story__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tt-mag-story__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, rgba(198, 161, 91, 0.20) 0%, transparent 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.tt-mag-story:hover .tt-mag-story__art img { transform: scale(1.05); }
.tt-mag-story__mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
}
.tt-mag-story__folio {
  position: absolute;
  top: 0.55rem;
  left: 0.7rem;
  font-family: var(--tt-font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: #FBF6EB;
  text-shadow: 0 1px 8px rgba(18, 63, 56, 0.55);
  z-index: 1;
}
.tt-mag-story__title {
  font-family: var(--tt-font-display);
  font-size: clamp(1.08rem, 1.9vw, 1.3rem);
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.tt-mag-story__title a { color: var(--tt-mag-forest); }
.tt-mag-story__title a:hover { color: var(--tt-mag-gold-deep); }
.tt-mag-story__deck {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tt-mag-forest-soft);
  margin: 0 0 0.65rem;
}
.tt-mag-story__meta {
  font-family: var(--tt-font-body);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-sage-mute);
  margin: 0;
}
.tt-mag-story__meta a { color: var(--tt-mag-gold-text); }
.tt-mag-story__meta a:hover { color: var(--tt-mag-forest); }
.tt-mag-story__dot { margin: 0 0.4rem; color: var(--tt-mag-gold); }

.tt-mag-note {
  max-width: 680px;
  margin: clamp(2.4rem, 6vw, 3.6rem) auto 0;
  color: var(--tt-mag-forest-soft);
  line-height: 1.75;
  text-align: center;
}
.tt-mag-note a { color: var(--tt-mag-gold-text); }
.tt-mag-empty { text-align: center; color: var(--tt-mag-forest-soft); padding: 3rem 0; }

/* --- The practice room: deep green, set into the sand ---- */
.tt-mag-practice {
  margin: clamp(3rem, 7vw, 4.6rem) 0 0;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2.6rem);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(198, 161, 91, 0.16) 0%, transparent 62%),
    linear-gradient(168deg, var(--tt-mag-forest) 0%, var(--tt-mag-forest-deep) 100%);
  color: var(--tt-mag-on-forest-soft);
}
.tt-mag-practice__head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.tt-mag-practice__head .tt-mag-ornament { margin-bottom: 1rem; }
.tt-mag-practice__head .tt-mag-ornament i { background: linear-gradient(90deg, transparent, var(--tt-mag-gold)); }
.tt-mag-practice__head .tt-mag-ornament b + i { background: linear-gradient(90deg, var(--tt-mag-gold), transparent); }
.tt-mag-practice__head .tt-mag-ornament b { background: var(--tt-mag-gold); }
.tt-mag-practice__title {
  font-family: var(--tt-font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.14;
  color: var(--tt-mag-on-forest);
  margin: 0 0 0.5rem;
}
.tt-mag-practice__sub {
  font-family: var(--tt-font-body);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tt-mag-on-forest-soft);
  margin: 0;
}
.tt-mag-practice__body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.4rem, 4vw, 2.6rem);
}
.tt-mag-practice__lead {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.8rem);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 0.5px solid rgba(198, 161, 91, 0.3);
  background: rgba(251, 246, 235, 0.05);
  transition: border-color 400ms ease, background 400ms ease;
}
.tt-mag-practice__lead:hover { border-color: rgba(198, 161, 91, 0.62); background: rgba(251, 246, 235, 0.09); }
.tt-mag-practice__wheel { flex: none; color: var(--tt-mag-gold); }
.tt-mag-wheel {
  width: clamp(88px, 16vw, 132px);
  height: auto;
  display: block;
  transition: transform 1400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tt-mag-practice__lead:hover .tt-mag-wheel { transform: rotate(30deg); }
.tt-mag-practice__leadtext { display: block; min-width: 0; }
.tt-mag-practice__leadtext .tt-mag-kicker { display: block; margin-bottom: 0.5rem; color: var(--tt-mag-gold); }
.tt-mag-practice__leadname {
  display: block;
  font-family: var(--tt-font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.16;
  color: var(--tt-mag-on-forest);
  margin-bottom: 0.5rem;
}
.tt-mag-practice__leaddesc {
  display: block;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--tt-mag-on-forest-soft);
  margin-bottom: 0.95rem;
}
.tt-mag-practice__lead .tt-mag-readlink { border-bottom: 0; padding-bottom: 0; color: var(--tt-mag-gold); }
.tt-mag-practice__lead:hover .tt-mag-readlink { color: var(--tt-mag-on-forest); }
.tt-mag-practice__list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.tt-mag-practice__list li + li { border-top: 0.5px solid rgba(198, 161, 91, 0.24); }
.tt-mag-practice__list a { display: block; padding: clamp(0.85rem, 2vw, 1.15rem) 0.2rem; transition: padding-left 350ms ease; }
.tt-mag-practice__list a:hover { padding-left: 0.7rem; }
.tt-mag-practice__name {
  display: block;
  font-family: var(--tt-font-display);
  font-size: 1.08rem;
  color: var(--tt-mag-on-forest);
  margin-bottom: 0.18rem;
}
.tt-mag-practice__list a:hover .tt-mag-practice__name { color: var(--tt-mag-gold); }
.tt-mag-practice__desc { display: block; font-size: 0.84rem; line-height: 1.55; color: rgba(241, 231, 211, 0.55); }

/* --- Colophon ------------------------------------------- */
.tt-mag-colophon {
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 0.5px solid var(--tt-mag-hair);
  text-align: center;
}
.tt-mag-colophon .tt-mag-ornament { margin-bottom: 1.4rem; }
.tt-mag-colophon__trust {
  font-family: var(--tt-font-body);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tt-mag-forest-soft);
  margin: 0 0 1.2rem;
}
.tt-mag-colophon__write a {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--tt-mag-gold-deep);
  border-bottom: 1px solid var(--tt-mag-hair);
  padding-bottom: 0.2rem;
}
.tt-mag-colophon__write a:hover { color: var(--tt-mag-forest); border-bottom-color: var(--tt-mag-forest); }

/* --- A shelf page --------------------------------------- */
.tt-mag-shelfhead {
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(198, 161, 91, 0.18) 0%, transparent 62%),
    linear-gradient(178deg, var(--tt-mag-sand-light) 0%, var(--tt-mag-sand) 100%);
  color: var(--tt-mag-forest-soft);
  padding: clamp(2.4rem, 6vw, 3.8rem) var(--tt-pad) 0;
}
.tt-mag-shelfhead__inner { max-width: 780px; margin: 0 auto; text-align: center; }
.tt-mag-shelfhead__from { margin: 0 0 1.1rem; }
/* On shelf pages the publication announces itself: big, bold, green,
   set in capitals with wide tracking, every letter the same deep
   forest. The gold M steps back so the name speaks with one voice. */
.tt-mag-shelfhead__from .tt-mag-wordmark {
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--tt-mag-forest);
  transition: letter-spacing 0.25s ease, color 0.2s ease;
}
.tt-mag-shelfhead__from .tt-mag-wordmark em { color: inherit; }
.tt-mag-shelfhead__from a:hover .tt-mag-wordmark {
  color: var(--tt-mag-gold-deep);
  letter-spacing: 0.19em;
}

.tt-mag-shelfhead__title {
  font-family: var(--tt-font-display);
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  line-height: 1.1;
  color: var(--tt-mag-forest);
  margin: 0 0 1rem;
}
.tt-mag-shelfhead__deck {
  max-width: 58ch;
  margin: 0 auto;
  font-size: clamp(0.96rem, 1.5vw, 1.06rem);
  line-height: 1.68;
  color: var(--tt-mag-forest-soft);
}
.tt-mag-shelfhead .tt-mag-ornament { margin: 1.5rem auto 0; }
.tt-mag-shelfhead .tt-mag-spine { max-width: 1120px; margin: clamp(1.6rem, 4vw, 2.2rem) auto 0; border-bottom: 0; }
.tt-shelf-page { background: var(--tt-mag-sand-light); }
.tt-mag-shelfbody {
  padding-top: clamp(2.2rem, 5vw, 3.4rem);
  background: linear-gradient(178deg, var(--tt-mag-sand-light) 0%, var(--tt-ivory) 34%);
}
.tt-mag-shelfbody__back { margin-top: 2.6rem; text-align: center; }

.tt-mag-shelfindex { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.tt-mag-lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: center;
  padding-bottom: clamp(1.6rem, 4vw, 2.4rem);
  border-bottom: 0.5px solid var(--tt-mag-hair);
}
.tt-mag-lead__art { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--tt-mag-sand-deep); }
.tt-mag-lead__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-mag-lead__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, rgba(198, 161, 91, 0.20) 0%, transparent 55%);
  mix-blend-mode: soft-light;
}
.tt-mag-lead__title {
  font-family: var(--tt-font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  line-height: 1.16;
  margin: 0 0 0.8rem;
}
.tt-mag-lead__title a { color: var(--tt-mag-forest); }
.tt-mag-lead__title a:hover { color: var(--tt-mag-gold-deep); }
.tt-mag-lead__deck { font-size: 1rem; line-height: 1.7; color: var(--tt-mag-forest-soft); margin: 0 0 1.1rem; }
.tt-mag-lead__body .tt-mag-byline { margin-bottom: 1.1rem; }

/* --- A story: the art leads, the words follow ------------ */
.tt-essay__head--mag {
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(198, 161, 91, 0.16) 0%, transparent 60%),
    linear-gradient(178deg, var(--tt-mag-sand-light) 0%, var(--tt-mag-sand) 100%);
  color: var(--tt-mag-forest-soft);
  padding: 0 0 clamp(1.8rem, 4vw, 2.8rem);
  text-align: left;
}
.tt-essay__head--mag:not(.has-art) { padding-top: clamp(2.6rem, 6vw, 4rem); }
.tt-essay__art { margin: 0 0 clamp(0.4rem, 2vw, 1rem); }
.tt-essay__art figcaption {
  max-width: 880px;
  margin: 0.6rem auto 0;
  padding: 0 var(--tt-pad);
  font-family: var(--tt-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--tt-mag-gold-text);
  text-align: center;
}
.tt-essay__head--mag .tt-essay__head-inner { max-width: 760px; position: relative; z-index: 2; }
.tt-essay__head--mag .tt-essay__title {
  font-family: var(--tt-font-display);
  color: var(--tt-mag-forest);
  font-size: clamp(2.05rem, 4.8vw, 3.25rem);
  line-height: 1.14;
  margin: 0 0 1rem;
}
.tt-essay__deck {
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  line-height: 1.68;
  color: var(--tt-mag-forest-soft);
  margin: 0 0 1.5rem;
}
.tt-essay__head--mag .tt-mag-byline { margin-bottom: 1.1rem; }
.tt-essay__head--mag .tt-essay__meta {
  color: var(--tt-sage-mute);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tt-essay__head--mag .tt-essay__meta a { color: var(--tt-mag-gold-text); }
.tt-essay__head--mag .tt-essay__dot { color: var(--tt-mag-gold); }
.tt-essay--mag { background: linear-gradient(178deg, var(--tt-mag-sand) 0%, var(--tt-ivory) 46%); }
.tt-essay--mag .tt-prose { margin-top: clamp(1.6rem, 4vw, 2.4rem); }
.tt-essay--mag .tt-essay__foot .tt-mag-ornament { margin: 0 auto 1.4rem; }
.tt-essay--mag .tt-essay__foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  justify-content: center;
}

/* --- The closing reading band ---------------------------- */
.tt-mag-reading {
  margin: clamp(2.6rem, 6vw, 4rem) auto 0;
  max-width: 900px;
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.2rem, 3vw, 2.2rem);
  background: linear-gradient(168deg, var(--tt-mag-parchment) 0%, var(--tt-mag-sand) 100%);
  border-top: 1px solid var(--tt-mag-hair);
  border-bottom: 1px solid var(--tt-mag-hair);
}
.tt-mag-reading__head { text-align: center; margin-bottom: 1.6rem; }
.tt-mag-reading__head .tt-mag-ornament { margin-bottom: 0.9rem; }
.tt-mag-reading__title {
  font-family: var(--tt-font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  color: var(--tt-mag-forest);
  margin: 0 0 0.4rem;
}
.tt-mag-reading__sub {
  font-family: var(--tt-font-body);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tt-mag-gold-text);
  margin: 0;
}
.tt-mag-reading__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.6rem, 4vw, 2.8rem);
}
.tt-mag-reading__all { text-align: center; margin: 1.8rem 0 0.4rem; }

/* v1.67.2 — the book as an object: a cover standing with a shadow,
   a short title, the recommending therapist in gold. No boxes. */
.tt-mag-book {
  width: clamp(128px, 16vw, 158px);
  text-align: center;
}
.tt-mag-book__cover {
  display: block;
  margin: 0 auto 0.85rem;
}
.tt-mag-book__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--tt-radius);
  box-shadow:
    0 1px 2px rgba(18, 63, 56, 0.14),
    0 10px 22px rgba(18, 63, 56, 0.18),
    -3px 0 6px rgba(18, 63, 56, 0.06) inset;
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 500ms ease;
}
.tt-mag-book:hover .tt-mag-book__cover img {
  transform: translateY(-4px);
  box-shadow:
    0 2px 3px rgba(18, 63, 56, 0.14),
    0 16px 30px rgba(18, 63, 56, 0.22),
    -3px 0 6px rgba(18, 63, 56, 0.06) inset;
}
.tt-mag-book__spine {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  padding: 0.9rem;
  border-radius: var(--tt-radius);
  background: linear-gradient(160deg, var(--tt-mag-forest), var(--tt-mag-forest-deep));
  color: var(--tt-mag-on-forest);
  font-family: var(--tt-font-display);
  font-size: 0.95rem;
  line-height: 1.3;
  box-shadow: 0 10px 22px rgba(18, 63, 56, 0.18);
}
.tt-mag-book__title {
  font-family: var(--tt-font-display);
  font-size: 1.02rem;
  line-height: 1.25;
  margin: 0 0 0.2rem;
}
.tt-mag-book__title a { color: var(--tt-mag-forest); }
.tt-mag-book__title a:hover { color: var(--tt-mag-gold-deep); }
.tt-mag-book__author {
  font-family: var(--tt-font-body);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-sage-mute);
  margin: 0 0 0.3rem;
}
.tt-mag-book__rec {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 0.85rem;
  margin: 0;
}
.tt-mag-book__rec a { color: var(--tt-mag-gold-text); }
.tt-mag-book__rec a:hover { color: var(--tt-mag-forest); }
@media (prefers-reduced-motion: reduce) {
  .tt-mag-book__cover img { transition: none; }
  .tt-mag-book:hover .tt-mag-book__cover img { transform: none; }
}

/* --- Responsive ------------------------------------------ */
@media (max-width: 900px) {
  .tt-mag-shelf__grid,
  .tt-mag-shelfindex { grid-template-columns: repeat(2, 1fr); }
  .tt-mag-lead { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .tt-mag-practice__body { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tt-mag-shelf__grid,
  .tt-mag-shelfindex { grid-template-columns: 1fr; }
  .tt-mag-shelf__head { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .tt-mag-cover__band { margin-top: -1.6rem; }
  .tt-mag-cover__art img,
  .tt-essay__art img { max-height: 62vh; }
}
@media (max-width: 520px) {
  .tt-mag-practice__lead { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-mag-story__art img,
  .tt-mag-wheel,
  .tt-mag-practice__list a { transition: none; }
  .tt-mag-story:hover .tt-mag-story__art img,
  .tt-mag-practice__lead:hover .tt-mag-wheel { transform: none; }
}

.tt-mag a:focus-visible,
.tt-mag-shelfhead a:focus-visible,
.tt-essay__head--mag a:focus-visible {
  outline: 2px solid var(--tt-mag-gold-deep);
  outline-offset: 3px;
}

/* v1.66.6 — the invitation card wears the mark */
.tt-nlcard__logo {
  display: block;
  width: clamp(150px, 28vw, 200px);
  height: auto;
  margin: 0 auto 0.9rem;
}

/* v1.66.8 — the share row as icons, centered below the invitation */
.tt-share--icons {
  display: block;
  text-align: center;
  border-top: 0;
  padding-top: 0;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
}
.tt-share--icons .tt-share__label {
  display: block;
  margin: 0 0 0.85rem;
  font-family: var(--tt-font-body);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tt-champagne-text);
}
.tt-share__icons {
  display: flex;
  justify-content: center;
  gap: clamp(0.7rem, 2vw, 1rem);
}
.tt-share__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--tt-champagne);
  color: var(--tt-champagne-deep);
  transition: background 300ms ease, color 300ms ease, transform 300ms ease;
}
.tt-share__icon svg { width: 21px; height: 21px; display: block; }
.tt-share__icon:hover,
.tt-share__icon:focus-visible {
  background: var(--tt-champagne);
  color: var(--tt-ivory);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .tt-share__icon { transition: none; }
  .tt-share__icon:hover { transform: none; }
}

/* v1.66.9 — the next-step invitation sits before the subscribe card;
   the closing links become Explore buttons */
.tt-essay__next {
  max-width: 680px;
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
  text-align: center;
}
.tt-essay__next .tt-mag-ornament { margin: 0 auto 1.4rem; }
.tt-essay__next-cta { margin: 1.5rem 0 0; }

.tt-essay__foot--explore {
  text-align: center;
  margin-top: clamp(2.2rem, 5vw, 3rem);
}
.tt-essay__explore-label {
  font-family: var(--tt-font-body);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tt-champagne-text);
  margin: 0 0 1rem;
}
.tt-essay__foot--explore .tt-essay__foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
}

/* ==========================================================
   v1.66.11 — the gentle arrival

   On a therapist's page, the portrait arrives: it settles from
   92% to full size while the gold ring warms from quiet to lit.
   Once, on load, about 0.9s — then stillness. The face itself
   never spins or slides; only scale and light.
   ========================================================== */
.single-therapist .tt-herocard__face {
	animation: tt-face-arrive 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) both;
	animation-delay: 0.15s;
	will-change: transform;
}
@keyframes tt-face-arrive {
	from {
		transform: translateX(-50%) scale(0.92);
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(198, 161, 91, 0);
	}
	60% {
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32), 0 0 22px 4px rgba(198, 161, 91, 0.38);
	}
	to {
		transform: translateX(-50%) scale(1);
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32), 0 0 14px 2px rgba(198, 161, 91, 0.22);
	}
}

/* The ring itself warms as the portrait settles. */
.single-therapist .tt-herocard__face::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 3px solid #C6A15B;
	opacity: 0;
	animation: tt-ring-warm 1.1s ease-out 0.25s both;
	pointer-events: none;
}
@keyframes tt-ring-warm {
	from { opacity: 0; filter: brightness(1); }
	55%  { opacity: 1; filter: brightness(1.35); }
	to   { opacity: 1; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
	.single-therapist .tt-herocard__face,
	.single-therapist .tt-herocard__face::after {
		animation: none;
	}
	.single-therapist .tt-herocard__face::after { opacity: 1; }
}

/* ==========================================================
   v1.66.12 — the shine

   After the portrait settles, a gleam sweeps the ring once —
   light catching the edge of a gilded frame. It begins at
   1.45s, just as the arrival finishes, travels clockwise from
   the upper left, and is gone by 2.6s. Then the page is still.
   ========================================================== */
.single-therapist .tt-herocard__face::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	padding: 3px;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 300deg,
		rgba(255, 244, 214, 0.95) 330deg,
		#FFF7E0 338deg,
		rgba(255, 244, 214, 0.95) 346deg,
		transparent 376deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transform: rotate(-120deg);
	animation: tt-ring-shine 1.15s cubic-bezier(0.35, 0, 0.25, 1) 1.45s both;
	pointer-events: none;
	z-index: 1;
}
@keyframes tt-ring-shine {
	0%   { opacity: 0; transform: rotate(-120deg); }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { opacity: 0; transform: rotate(240deg); }
}

@media (prefers-reduced-motion: reduce) {
	.single-therapist .tt-herocard__face::before { animation: none; opacity: 0; }
}

/* v1.66.14 — the first-session box on profiles: just the teal wash,
   no gold spine. Quote blocks elsewhere keep their gold left line. */
.tt-profile-section.tt-quote { border-left: 0; }

/* v1.66.15 — profile events: the calendar bar is the card's footer.
   The last event card opens at its foot and the button band attaches
   flush, sharing the card's border and radius — one object, not two. */
.tt-profile-section .tt-events .tt-event:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.tt-profile-section .tt-events__all { margin-top: 0; }
.tt-profile-section .tt-events__all .tt-btn {
  display: block;
  width: 100%;
  text-align: center;
  /* White, so the bar reads as the foot of the card above it rather
     than a separate tinted block. The hover stays deep teal. */
  background: #FFFFFF;
  border: 0.5px solid var(--tt-hairline);
  border-top: 0.5px solid var(--tt-hairline);
  border-radius: 0 0 var(--tt-radius-card) var(--tt-radius-card);
  color: var(--tt-teal);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.8rem 1.1rem;
}
.tt-profile-section .tt-events__all .tt-btn:hover {
  background: var(--tt-teal);
  color: var(--tt-ivory);
}

/* v1.67.0 — More from this shelf: the article's related row, in the
   magazine's own dress, on cream */
.tt-mag-more {
  max-width: 900px;
  margin: clamp(2.6rem, 6vw, 3.8rem) auto 0;
}
.tt-mag-more__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 0.5px solid var(--tt-mag-hair);
  margin-bottom: 1.5rem;
}
.tt-mag-more__title {
  font-family: var(--tt-font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.12;
  color: var(--tt-mag-forest);
  margin: 0;
}
.tt-mag-more__grid { gap: clamp(1.2rem, 3vw, 1.8rem); }
@media (max-width: 620px) {
  .tt-mag-more__head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}


/* ==========================================================
   Membership: returning from Stripe Checkout
   ========================================================== */
.tt-subnote {
  border-radius: var(--tt-radius-card);
  padding: 1rem 1.35rem;
  margin: 0 0 1.5rem;
  font-family: var(--tt-font-body, inherit);
  font-size: 0.95rem;
  line-height: 1.6;
}
.tt-subnote p { margin: 0; }
.tt-subnote--ok {
  background: #EAF4EF;
  border: 1px solid #CBE3D6;
  color: #1F6E62;
}
.tt-subnote--note {
  background: #FAF9F4;
  border: 1px solid #E4DECB;
  color: #6E8478;
}

/* Founding plan: terms and seat count */
.tt-plan__terms {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--tt-sage-mute, #6E8478);
}
.tt-plan__seats {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-gold-deep, #A98545);
}


/* ==========================================================
   The Feelings Wheel offer
   ========================================================== */
.tt-lead {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  pointer-events: none;
}
.tt-lead[hidden] { display: none; }

.tt-lead__panel {
  pointer-events: auto;
  background: var(--tt-ivory, #FAF9F4);
  border: 1px solid var(--tt-champagne, #C6A15B);
  border-radius: var(--tt-radius-card);
  box-shadow: 0 18px 48px rgba(18, 63, 56, 0.22);
  padding: 1.6rem 1.7rem;
  display: flex;
  gap: 1.3rem;
  align-items: flex-start;
  position: relative;
  transition: transform 300ms ease, opacity 300ms ease;
}

/* Slides up from the bottom, gentler */
.tt-lead--sheet { align-items: flex-end; justify-content: center; }
.tt-lead--sheet .tt-lead__panel {
  margin: 0 1rem 1rem;
  max-width: 620px;
  transform: translateY(24px);
  opacity: 0;
}
.tt-lead--sheet.is-open .tt-lead__panel { transform: translateY(0); opacity: 1; }

/* Centred over the page, louder */
.tt-lead--modal { align-items: center; justify-content: center; background: rgba(18, 63, 56, 0); transition: background 300ms ease; }
.tt-lead--modal.is-open { background: rgba(18, 63, 56, 0.38); pointer-events: auto; }
.tt-lead--modal .tt-lead__panel {
  margin: 1rem;
  max-width: 560px;
  transform: scale(0.97);
  opacity: 0;
}
.tt-lead--modal.is-open .tt-lead__panel { transform: scale(1); opacity: 1; }

.tt-lead__art { flex: 0 0 78px; }
.tt-lead__art svg { width: 78px; height: 78px; display: block; }

.tt-lead__body { flex: 1; min-width: 0; }
.tt-lead__title {
  font-family: var(--tt-font-display, Georgia, serif);
  color: var(--tt-ink, #123F38);
  font-size: 1.4rem;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}
.tt-lead__text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tt-body-neutral, #4B5A54);
  margin: 0 0 1rem;
}

.tt-lead__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tt-lead__row input[type="email"] {
  flex: 1;
  min-width: 190px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--tt-hairline, #E2E7DE);
  border-radius: var(--tt-radius);
  font-family: var(--tt-font-body, sans-serif);
  font-size: 0.95rem;
}
.tt-lead__row input[type="email"]:focus {
  outline: 2px solid var(--tt-champagne, #C6A15B);
  outline-offset: 1px;
}

.tt-lead__consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--tt-sage-mute, #6E8478);
}
.tt-lead__error { margin: 0.6rem 0 0; font-size: 0.82rem; color: #B02E2E; }

.tt-lead__no {
  display: block;
  margin: 0.85rem 0 0;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--tt-font-body, sans-serif);
  font-size: 0.8rem;
  color: var(--tt-sage-mute, #6E8478);
  text-decoration: underline;
  cursor: pointer;
}
.tt-lead__no:hover { color: var(--tt-ink, #123F38); }

.tt-lead__close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tt-sage-mute, #6E8478);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.tt-lead__close:hover { color: var(--tt-ink, #123F38); }

.tt-lead__thanks {
  font-size: 0.95rem;
  color: var(--tt-teal, #1F6E62);
  margin: 0 0 0.9rem;
}

@media (max-width: 600px) {
  .tt-lead__panel { flex-direction: column; gap: 0.9rem; padding: 1.3rem 1.2rem; }
  .tt-lead__art { flex: 0 0 auto; }
  .tt-lead__art svg { width: 56px; height: 56px; }
  .tt-lead--sheet .tt-lead__panel { margin: 0 0.6rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-lead__panel { transition: none; transform: none !important; }
}


/* ==========================================================
   The Feelings Wheel offer  (inc/wheel-offer.php)
   Card width and zoom come through as inline custom properties
   from the Customizer, so the values below are only defaults.
   Every selector is .ttwo .child so it outranks any `.ttw svg`
   style on pages where the full tool also appears.
   ========================================================== */
.ttwo{
  /* ================= TUNE HERE ================= */
  --ttwo-w: 460px;              /* card width */
  --ttwo-zoom: 1;               /* 1 = the whole wheel spans the card width.
                                   1.6 draws it closer in, and it then pans
                                   left and right as well as up and down. */
  --ttwo-align: 44px auto 0;    /* "44px 0 0" to sit left instead */
  /* ============================================= */

  /* scale from the width the card actually receives, so type never
     outgrows the column on a narrow screen */
  /* one scaled pixel. Multipliers are unitless: calc(30 * var(--s)).
     A length divided by a number is a length, so px must NOT appear
     on the multiplier or the whole declaration is discarded. */
  --s: calc(min(var(--ttwo-w), 100vw - 28px) / 460);
  --spruce:#173B30; --spruce-deep:#0C2620; --gold:#C9A24B; --gold-soft:#D9BE84;
  --dot:#E0A93E; --cream:#F1E7D3; --cream-soft:rgba(241,231,211,.66);

  position:relative; width:100%;
  max-width:460px;                    /* fallback first */
  max-width:var(--ttwo-w);
  margin:var(--ttwo-align);
  border-radius:calc(24 * var(--s)); overflow:hidden;
  background:
    radial-gradient(88% 40% at 50% 32%, rgba(201,162,75,.16) 0%, rgba(201,162,75,0) 70%),
    linear-gradient(172deg,#1E5041 0%, var(--spruce) 42%, var(--spruce-deep) 100%);
  box-shadow:0 calc(20 * var(--s)) calc(54 * var(--s)) rgba(12,38,32,.36),
             inset 0 0 0 1px rgba(201,162,75,.34);
}
/* nothing inside may burst the card */
.ttwo, .ttwo *, .ttwo *::before, .ttwo *::after{box-sizing:border-box}
.ttwo *{max-width:100%; min-width:0}

/* ---------- the gold title ---------- */
/* set as a label, matching the nav and the wordmark on the site,
   held between two hairlines */
.ttwo .ttwo-head{
  position:relative; text-align:center;
  padding:calc(24 * var(--s)) calc(26 * var(--s)) calc(18 * var(--s));
}
/* the house name leads, the way the wordmark leads on the site */
.ttwo .ttwo-brand{
  margin:0 0 calc(9 * var(--s));
  font-family:'Karla',sans-serif; font-weight:500;
  font-size:calc(11 * var(--s)); letter-spacing:.36em; text-transform:uppercase;
  color:rgba(241,231,211,.8); padding-left:.36em;
}
.ttwo .ttwo-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:calc(14 * var(--s));
}
.ttwo .ttwo-head::after{
  content:""; position:absolute; left:calc(28 * var(--s)); right:calc(28 * var(--s));
  bottom:0; height:1px; background:rgba(201,162,75,.24);
}
.ttwo .ttwo-hairline{
  flex:1 1 auto; min-width:calc(10 * var(--s)); max-width:calc(46 * var(--s)); height:1px;
  background:linear-gradient(90deg,rgba(201,162,75,0),rgba(201,162,75,.5));
}
.ttwo .ttwo-hairline:last-child{
  background:linear-gradient(90deg,rgba(201,162,75,.5),rgba(201,162,75,0));
}
.ttwo .ttwo-kicker{
  flex:0 0 auto;
  font-family:'Karla',sans-serif; font-weight:500;
  font-size:calc(9.5 * var(--s)); letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap; padding-left:.3em;
}

/* ---------- the wheel, in a window you can drag ---------- */
.ttwo .ttwo-stagewrap{position:relative}
.ttwo .ttwo-stage{
  position:relative; width:100%;
  /* twice as wide as it is tall, so exactly the top half of a round
     wheel fills it. Divided by the zoom, because a larger wheel needs
     a proportionally shorter window to still show half of it. */
  aspect-ratio:2;
  aspect-ratio:calc(2 / var(--ttwo-zoom));
  overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  cursor:grab; scrollbar-width:thin; scrollbar-color:rgba(201,162,75,.35) transparent;
}
.ttwo .ttwo-stage.is-dragging{cursor:grabbing}
.ttwo .ttwo-stage::-webkit-scrollbar{width:5px; height:5px}
.ttwo .ttwo-stage::-webkit-scrollbar-thumb{background:rgba(201,162,75,.32); border-radius:99px}
.ttwo .ttwo-stage::-webkit-scrollbar-track{background:transparent}

.ttwo .ttwo-canvas{
  width:calc(100% * var(--ttwo-zoom));
  aspect-ratio:1;                     /* square, so the wheel stays round */
  max-width:none;                     /* beats the blanket rule above */
}
.ttwo .ttwo-wheel{                    /* (0,2,0) outranks .ttw svg */
  display:block; width:100%; height:100%; max-width:none;
}

/* the edges soften, so it reads as a view onto something larger */
.ttwo .ttwo-fade{position:absolute; pointer-events:none}
.ttwo .ttwo-fade--l{left:0; top:0; bottom:0; width:calc(34 * var(--s));
  background:linear-gradient(90deg,rgba(19,48,39,.85),rgba(19,48,39,0))}
.ttwo .ttwo-fade--r{right:0; top:0; bottom:0; width:calc(34 * var(--s));
  background:linear-gradient(270deg,rgba(19,48,39,.85),rgba(19,48,39,0))}
.ttwo .ttwo-fade--b{left:0; right:0; bottom:0; height:calc(30 * var(--s));
  background:linear-gradient(0deg,rgba(16,42,34,.9),rgba(16,42,34,0))}

.ttwo .ttwo-seg{stroke:#F6F4ED; stroke-width:2; cursor:pointer;
  transition:opacity .25s ease, filter .25s ease}
.ttwo .ttwo-wheel.is-focused .ttwo-seg{opacity:.16}
.ttwo .ttwo-wheel.is-focused .ttwo-seg.lit{opacity:1; filter:saturate(1.08)}
.ttwo .ttwo-core{fill:#FFFFFF; font-family:'Fraunces',Georgia,serif; letter-spacing:.02em}
.ttwo .ttwo-t2, .ttwo .ttwo-t3{fill:#22332C; font-family:'Karla',sans-serif}
.ttwo .ttwo-wheel.is-focused text.ttwo-t2,
.ttwo .ttwo-wheel.is-focused text.ttwo-t3,
.ttwo .ttwo-wheel.is-focused text.ttwo-core{opacity:.16; transition:opacity .25s ease}
.ttwo .ttwo-wheel.is-focused text.lit{opacity:1}
.ttwo .ttwo-hub{fill:#FBF8F1; stroke:#D8D3C4; cursor:pointer}
.ttwo .ttwo-r1{font-family:'Karla',sans-serif; font-weight:700; font-size:15px;
  fill:#5C6B63; letter-spacing:.08em}
.ttwo .ttwo-r2{font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:31px; fill:#173B30}
.ttwo .ttwo-r3{font-family:'Karla',sans-serif; font-weight:700; font-size:15.5px;
  fill:#5C6B63; letter-spacing:.02em}
.ttwo .ttwo-dot{transform-box:fill-box; transform-origin:center;
  animation:ttwo-breathe 4s ease-in-out infinite}
@keyframes ttwo-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

.ttwo .ttwo-hint{
  margin:calc(10 * var(--s)) 0 0; text-align:center;
  font-family:'Karla',sans-serif; font-weight:500; font-size:calc(10 * var(--s));
  letter-spacing:.24em; text-transform:uppercase; color:rgba(241,231,211,.3);
}
.ttwo .ttwo-hint[hidden]{display:none}

/* ---------- the invitation ---------- */
.ttwo .ttwo-body{
  padding:calc(30 * var(--s)) calc(30 * var(--s)) calc(32 * var(--s));
  text-align:center;
}
/* a single measure. Everything sets inside it, so the column never
   stretches and the rhythm stays even. */
/* the column. Body copy, field and button all share it, so three
   different widths never stack. */
.ttwo{--col:calc(272 * var(--s))}
.ttwo .ttwo-body > *{max-width:var(--col); margin-left:auto; margin-right:auto}
/* a rule under the wheel, the way the site rules sit under its headings */
.ttwo .ttwo-body{position:relative}
.ttwo .ttwo-body::before{
  content:""; position:absolute; top:0; left:calc(30 * var(--s)); right:calc(30 * var(--s));
  height:1px; background:rgba(201,162,75,.28);
}

.ttwo .ttwo-title{
  /* auto on the sides, or the column stops centring */
  margin:0 auto calc(11 * var(--s));
  font-family:'Fraunces',Georgia,serif;
  font-weight:400; font-style:normal; font-size:calc(24 * var(--s));
  font-variation-settings:'opsz' 144;
  line-height:1.2; color:var(--cream); letter-spacing:.002em; text-wrap:balance;
}
.ttwo .ttwo-text{
  margin:0 auto calc(26 * var(--s)); max-width:var(--col);
  font-family:'Karla',sans-serif; font-weight:400;
  font-size:calc(12.5 * var(--s)); line-height:1.85; letter-spacing:.022em;
  color:rgba(241,231,211,.56); text-wrap:pretty;
}

.ttwo .ttwo-form, .ttwo .ttwo-done{max-width:var(--col); margin:0 auto}
.ttwo .ttwo-input{
  display:block; width:100%; text-align:left;
  padding:calc(11 * var(--s)) calc(18 * var(--s));
  font-family:'Karla',sans-serif; font-size:calc(12.5 * var(--s));
  letter-spacing:.025em; color:var(--spruce);
  background:rgba(251,248,241,.96); border:0; border-radius: var(--tt-radius);
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.34);
  transition:box-shadow .2s ease;
}
.ttwo .ttwo-input::placeholder{color:#93A099; letter-spacing:.02em}
.ttwo .ttwo-input:focus{outline:0; box-shadow:inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(201,162,75,.18)}

/* restraint reads as expensive: a slimmer button, lighter tracking,
   flat gold rather than a gradient */
.ttwo .ttwo-btn{
  display:block; width:100%; margin-top:calc(8 * var(--s));
  padding:calc(11.5 * var(--s)) calc(18 * var(--s));
  font-family:'Karla',sans-serif; font-weight:600; font-size:calc(9.5 * var(--s));
  letter-spacing:.19em; text-transform:uppercase; color:#12332A;
  background:var(--gold); border:0; border-radius: var(--tt-radius); cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  transition:background .22s ease, transform .12s ease;
}
.ttwo .ttwo-btn:hover{background:#D6B268}
.ttwo .ttwo-btn:active{transform:translateY(1px)}
.ttwo .ttwo-btn[disabled]{opacity:.55; cursor:default}

.ttwo .ttwo-consent{
  display:flex; gap:calc(9 * var(--s)); align-items:flex-start; text-align:left;
  margin:calc(15 * var(--s)) 0 0; cursor:pointer;
  font-family:'Karla',sans-serif; font-size:calc(9.5 * var(--s)); line-height:1.75;
  letter-spacing:.022em; color:rgba(241,231,211,.34);
}
.ttwo .ttwo-consent:hover{color:rgba(241,231,211,.52)}
.ttwo .ttwo-consent input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; position:relative;
  width:calc(12 * var(--s)); height:calc(12 * var(--s));
  margin:calc(3 * var(--s)) 0 0; padding:0; cursor:pointer;
  background:transparent; border:1px solid rgba(201,162,75,.45);
  border-radius:calc(2 * var(--s)); transition:background .18s ease, border-color .18s ease;
}
.ttwo .ttwo-consent input:checked{background:var(--gold); border-color:var(--gold)}
.ttwo .ttwo-consent input:checked::after{
  content:""; position:absolute; left:32%; top:12%;
  width:26%; height:56%; border:solid #12332A;
  border-width:0 1.5px 1.5px 0; transform:rotate(42deg);
}
.ttwo .ttwo-consent input:focus-visible{outline:2px solid var(--dot); outline-offset:2px}
/* corrections speak in gold, not in red. A mistyped address is a
   nudge, not an alarm, and red is the one colour not in the palette. */
.ttwo .ttwo-error{
  margin:calc(12 * var(--s)) 0 0; font-family:'Karla',sans-serif;
  font-size:calc(10.5 * var(--s)); line-height:1.6; letter-spacing:.03em;
  color:var(--gold);
}
.ttwo .ttwo-no{
  display:inline-block; width:auto; margin:calc(19 * var(--s)) 0 0; padding:0;
  background:none; border:0;
  font-family:'Karla',sans-serif; font-weight:400; font-size:calc(10.5 * var(--s));
  letter-spacing:.03em; color:rgba(241,231,211,.28);
  cursor:pointer; transition:color .25s ease;
}
.ttwo .ttwo-no:hover{color:rgba(241,231,211,.68)}

/* the house name sits apart, behind its own rule, the way a colophon does */
.ttwo .ttwo-sign{
  position:relative; margin:calc(26 * var(--s)) auto 0;
  padding-top:calc(16 * var(--s)); max-width:calc(200 * var(--s));
  font-family:'Karla',sans-serif; font-weight:500; font-size:calc(8 * var(--s));
  letter-spacing:.38em; text-transform:uppercase; color:rgba(201,162,75,.38);
}
.ttwo .ttwo-sign::before{
  content:""; position:absolute; top:0; left:22%; right:22%; height:1px;
  background:linear-gradient(90deg,rgba(201,162,75,0),rgba(201,162,75,.3),rgba(201,162,75,0));
}
.ttwo .ttwo-thanks{
  margin:0 auto; font-family:'Fraunces',Georgia,serif; font-style:normal;
  font-variation-settings:'opsz' 144;
  font-size:calc(23 * var(--s)); line-height:1.2; color:var(--cream); letter-spacing:.002em;
}
.ttwo .ttwo-thanks-sub{
  margin:calc(9 * var(--s)) 0 0; font-family:'Karla',sans-serif;
  font-size:calc(11.5 * var(--s)); line-height:1.8; letter-spacing:.025em;
  color:rgba(241,231,211,.42);
}

.ttwo.is-gone{opacity:0; transform:translateY(-10px); max-height:0; margin-top:0;
  pointer-events:none;
  transition:opacity .4s ease, transform .4s ease, max-height .5s ease, margin .5s ease}

@media (prefers-reduced-motion:reduce){.ttwo .ttwo-dot{animation:none}}


/* ==========================================================
   The offer, floating on the front page
   Small, over the corner, rising once the reader is invested.
   ========================================================== */
.ttwo.ttwo--float{
  position:fixed; right:calc(18 * var(--s)); bottom:calc(18 * var(--s));
  left:auto; margin:0; z-index:9000;
  transform:translateY(calc(26 * var(--s))); opacity:0;
  transition:transform .42s cubic-bezier(.2,.7,.3,1), opacity .42s ease;
  max-height:calc(100vh - 36px); overflow-y:auto;
}
.ttwo.ttwo--float[hidden]{display:none}
.ttwo.ttwo--float.is-open{transform:translateY(0); opacity:1}

.ttwo .ttwo-close{
  position:absolute; top:calc(8 * var(--s)); right:calc(11 * var(--s)); z-index:2;
  width:auto; padding:calc(2 * var(--s)) calc(5 * var(--s));
  background:none; border:0; cursor:pointer; line-height:1;
  font-family:'Karla',sans-serif; font-size:calc(20 * var(--s));
  color:rgba(241,231,211,.42); transition:color .2s ease;
}
.ttwo .ttwo-close:hover{color:var(--cream)}

/* the gift: the wheel itself, handed over the moment they subscribe */
.ttwo .ttwo-gift{
  display:inline-block; width:auto; margin-top:calc(16 * var(--s));
  text-decoration:none; text-align:center;
}

@media (max-width:560px){
  .ttwo.ttwo--float{
    right:calc(10 * var(--s)); left:calc(10 * var(--s)); bottom:calc(10 * var(--s));
    max-width:none; width:auto;
  }
}

/* Telehealth reach tag: a clinician listed here through statewide telehealth
   rather than a local practice. Quieter than the availability dot, since it
   is context rather than a call to action. */
.tt-card__reach {
  margin: 0.35rem 0 0;
}
.tt-reachtag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-champagne-text);
  background: var(--tt-champagne-tint);
  border: 1px solid var(--tt-champagne);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

/* ============================================================
   Hero 3: the matcher-first hero. Question 1 sits in the hero
   with the market's live rail beside it. The line art strokes
   in currentColor so it takes each market's teal automatically.
   ============================================================ */
.tt-hero3 {
  background: var(--tt-ivory);
  padding: 4rem 0 4.5rem;
}
.tt-hero3__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
.tt-hero3__art {
  position: relative;
  color: var(--tt-teal);
  max-width: 340px;
  margin-bottom: 0.5rem;
}
.tt-hero3__line {
  width: 100%;
  height: auto;
  display: block;
}
/* The line draws itself on load: restrained motion that reads as
   considered rather than busy. Skipped for reduced-motion readers. */
.tt-hero3__line path,
.tt-hero3__line circle,
.tt-hero3__line polyline {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: tt-draw 2.2s ease-out forwards;
}
@keyframes tt-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-hero3__line path,
  .tt-hero3__line circle,
  .tt-hero3__line polyline {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}
/* The Center: the one fixed element while the line changes per market. */
.tt-hero3__center {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tt-champagne);
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
}
.tt-hero3__title {
  margin: 0 0 0.4rem;
  /* The global h1 clamp tops out at 3.4rem, sized for the old two-word
     headline. SEO headlines run seven or eight words, and at 3.4rem they
     wrap to three heavy lines that shove the matcher below the fold.
     This cap keeps long market headlines to about two lines and leaves
     room for the panel underneath, which is the actual point of the page. */
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.22;
  text-wrap: balance;
}
.tt-hero3__lede {
  color: var(--tt-sage-mute);
  margin: 0 0 1.5rem;
  max-width: 44ch;
}
.tt-hero3__quiz {
  background: var(--tt-ivory);
  border: 1px solid var(--tt-hairline);
  border-top: 3px solid var(--tt-champagne);
  border-radius: var(--tt-radius-card);
  padding: 1.4rem 1.6rem 1.2rem;
}
.tt-hero3__step {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-champagne-text);
  margin: 0 0 0.5rem;
}
.tt-hero3__question {
  font-family: var(--tt-font-serif);
  font-size: 1.15rem;
  color: var(--tt-ink);
  margin: 0 0 0.9rem;
}
.tt-hero3__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.tt-hero3__opts button {
  font: inherit;
  font-size: 0.92rem;
  color: var(--tt-body);
  background: #fff;
  border: 1px solid var(--tt-hairline);
  border-radius: var(--tt-radius-chip);
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tt-hero3__opts button:hover,
.tt-hero3__opts button:focus-visible {
  border-color: var(--tt-teal);
  color: var(--tt-teal);
  background: var(--tt-water-tint);
  outline: none;
}
.tt-hero3__skip {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
}
.tt-hero3__skip a {
  color: var(--tt-sage-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tt-hero3__doneactions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.tt-hero3__doneactions .tt-link-arrow {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
/* The rail */
.tt-hero3__railhead {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-sage-mute);
  margin: 0 0 0.8rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.tt-hero3__count {
  font-family: var(--tt-font-serif);
  font-size: 1.1rem;
  letter-spacing: 0;
  color: var(--tt-teal);
}
.tt-hero3__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.tt-hero3__row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #fff;
  border: 1px solid var(--tt-hairline);
  border-radius: var(--tt-radius-card);
  padding: 0.7rem 0.9rem;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tt-hero3__row:hover {
  border-color: var(--tt-champagne);
  transform: translateX(2px);
}
.tt-hero3__face {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tt-water-deep);
  border: 1.5px solid var(--tt-champagne);
  object-fit: cover;
  flex: none;
}
.tt-hero3__row b {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--tt-ink);
}
.tt-hero3__row span {
  display: block;
  font-size: 0.78rem;
  color: var(--tt-sage-mute);
}
.tt-hero3__row .tt-hero3__tele {
  color: var(--tt-champagne-text);
}
.tt-hero3__railnote,
.tt-hero3__railempty {
  font-size: 0.8rem;
  color: var(--tt-sage-mute);
  text-align: right;
  margin: 0.7rem 0 0;
}
.tt-hero3__railempty {
  text-align: left;
}
.tt-hero3__railempty button {
  font: inherit;
  font-size: 0.8rem;
  color: var(--tt-teal);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tt-hero3__row.is-leaving {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
@media (max-width: 820px) {
  .tt-hero3__grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .tt-hero3 {
    padding: 2.5rem 0 3rem;
  }
  .tt-hero3__art {
    max-width: 260px;
  }
}

/* v1.90.1: the hero hosts the real six-question matcher, and the rail is
   its results panel. Rows the gate removes disappear entirely. */
.tt-hero3__list [data-tt-therapist].is-hidden {
  display: none;
}
.tt-hero3__rowbody {
  min-width: 0;
}
.tt-hero3 .tt-matcher {
  background: #FFFFFF;
  border: 1px solid var(--tt-hairline);
  border-top: 3px solid var(--tt-champagne);
  border-radius: var(--tt-radius-card);
  padding: 1.4rem 1.6rem 1.2rem;
}

/* The attachment quiz as a full band under the hero rather than a sidebar
   card: same content, laid out horizontally with the art beside the copy. */
.tt-quizband {
  background: #FFFFFF;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
/* The card stays white on the white band: the gold top rule and the
   hairline carry the edge, so no fill is needed to define it. */
.tt-quizband .tt-quizcard--band {
  background: #FFFFFF;
}
.tt-quizband__wrap {
  display: flex;
  justify-content: center;
}
.tt-quizcard--band {
  max-width: 720px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 2rem;
  align-items: center;
}
.tt-quizcard--band .tt-quizcard__art {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 150px;
}
.tt-quizcard--band .tt-btn {
  justify-self: start;
}
@media (max-width: 640px) {
  .tt-quizcard--band {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .tt-quizcard--band .tt-quizcard__art {
    grid-column: 1;
    grid-row: auto;
    margin: 0 auto;
  }
  /* The desktop grid pins the button left with justify-self: start, which
     survives the single-column switch unless it is explicitly recentered. */
  .tt-quizcard--band .tt-btn {
    justify-self: center;
  }
}


/* The hero side art slot: an optional market drawing under the rail,
   drawn in the market's color like the hero line. */
.tt-hero3__sideart {
  margin-top: 2rem;
  color: var(--tt-teal);
  opacity: 0.9;
}
.tt-hero3__sideart svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Stage cards above the attachment quiz keep their classic look; the band
   heading just needs air between the two pieces. */
.tt-quizband .tt-stages__grid {
  margin-bottom: 2.4rem;
}

/* v1.90.4: the rail note is now a real link to the full directory. */
.tt-hero3__railnote a {
  color: var(--tt-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tt-hero3__railnote a:hover {
  color: var(--tt-champagne-deep);
}

/* v1.90.7: the bindu mandala as the default hero art. It carries its own
   timeline, colors, and reduced-motion rules, so the theme only sizes it.
   Kept off the tt-hero3__line class so the generic draw animation cannot
   clobber its staging. */
.tt-hero3__art--bindu {
  max-width: 380px;
}
.tt-hero3__art--bindu .tt-bindu {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Market popup: a centered dialog carrying whatever HTML the
   market authored. Deliberately unstyled inside the slot, so a
   pasted widget brings its own look and nothing here fights it.
   ============================================================ */
.tt-adpop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}
.tt-adpop[hidden] {
  /* Invisible and inert rather than display:none: a widget inside a
     display:none subtree measures zero everywhere, so any pasted widget
     that sizes or centers itself at load would compute garbage. This way
     it has true layout from the first paint and just cannot be seen. */
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.tt-adpop__veil {
  position: absolute;
  inset: 0;
  background: rgba(18, 63, 56, 0.55);
  animation: tt-adpop-fade 0.25s ease-out;
}
.tt-adpop__frame {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 92vh;
  overflow: auto;
  animation: tt-adpop-rise 0.32s cubic-bezier(0.16, 0.7, 0.3, 1);
}
.tt-adpop__x {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 34px;
  height: 34px;
  font-size: 26px;
  line-height: 1;
  color: var(--tt-champagne);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.tt-adpop__x:hover,
.tt-adpop__x:focus-visible {
  opacity: 1;
}
/* The page behind must not scroll while the dialog is open. */
.tt-adpop-open,
.tt-adpop-open body {
  overflow: hidden;
}
@keyframes tt-adpop-fade {
  from { opacity: 0; }
}
@keyframes tt-adpop-rise {
  from { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .tt-adpop__veil,
  .tt-adpop__frame {
    animation: none;
  }
}

/* v1.93.0: the hero pairs the matcher with the market art. Results moved
   to their own section above the bookshelf, revealed on the first answer. */
.tt-hero3__artcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The matcher runs deep; centering the art against it fills the column
     instead of leaving the lower half of the hero empty. */
  justify-content: center;
}
.tt-hero3__artcol .tt-hero3__art,
.tt-hero3__artcol .tt-hero3__art--bindu {
  max-width: 440px;
  width: 100%;
}
@media (max-width: 820px) {
  .tt-hero3__artcol {
    order: -1;
    padding-top: 0;
  }
  .tt-hero3__artcol .tt-hero3__art,
  .tt-hero3__artcol .tt-hero3__art--bindu {
    max-width: 300px;
  }
}

/* ============================================================
   The attachment quiz, given its own moment: a deep spruce band
   in the register of the feelings wheel card, gold and cream on
   dark, the interlocking circles breathing above the invitation.
   The one dark passage on an ivory page, so it reads as a pause.
   ============================================================ */
.tt-quizhero {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201, 162, 75, 0.14) 0%, rgba(201, 162, 75, 0) 62%),
    linear-gradient(172deg, #1E5041 0%, #173B30 48%, #0C2620 100%);
  padding: 4.2rem 0 4.6rem;
  text-align: center;
}
.tt-quizhero__inner {
  max-width: 560px;
}
.tt-quizhero__art {
  width: 150px;
  height: auto;
  margin: 0 auto 1.2rem;
  display: block;
}
.tt-quizhero__bindu {
  transform-box: fill-box;
  transform-origin: center;
  animation: tt-quizhero-breathe 4s ease-in-out infinite;
}
@keyframes tt-quizhero-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.tt-quizhero__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #C9A24B;
  margin: 0 0 0.7rem;
}
.tt-quizhero__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: #F1E7D3;
  margin: 0 0 0.8rem;
  text-wrap: balance;
}
.tt-quizhero__text {
  color: rgba(241, 231, 211, 0.62);
  line-height: 1.8;
  max-width: 46ch;
  margin: 0 auto 1.8rem;
}
.tt-quizhero__btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #12332A;
  background: #C9A24B;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: background 0.22s ease, transform 0.12s ease;
}
.tt-quizhero__btn:hover {
  background: #D6B268;
  color: #12332A;
}
.tt-quizhero__btn:active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  .tt-quizhero__bindu {
    animation: none;
  }
}

/* The one sentence competitors cannot write, seated right under the
   matcher where the decision happens. */
.tt-hero3__verify {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--tt-sage-mute);
  margin: 0.9rem 0 0;
}
.tt-hero3__verify svg {
  flex: none;
}

/* v1.95.0: the dark band holds both self-reflection tools. Quiz on the
   left, the feelings wheel living inline on the right, no longer gated
   behind popup conditions. The wheel card's own gold ring defines it
   against the band. */
.tt-quizhero__eyebrow--band {
  text-align: center;
  margin-bottom: 2.2rem;
}
.tt-quizhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}
.tt-quizhero__grid .tt-quizhero__inner {
  max-width: none;
  text-align: left;
}
.tt-quizhero__grid .tt-quizhero__art {
  margin: 0 0 1.2rem;
}
.tt-quizhero__grid .tt-quizhero__text {
  margin-left: 0;
}
.tt-quizhero__wheel .ttwo {
  margin: 0 auto;
}
/* The page header already says who we are, and a permanent placement is
   an offering rather than an interruption, so the brand line and the
   decline button belong to the floating variant only. */
.tt-quizhero__wheel .ttwo-brand,
.tt-quizhero__wheel .ttwo-no {
  display: none;
}
@media (max-width: 880px) {
  .tt-quizhero__grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
  .tt-quizhero__grid .tt-quizhero__inner {
    text-align: center;
  }
  .tt-quizhero__grid .tt-quizhero__art {
    margin: 0 auto 1.2rem;
  }
}

/* v1.95.1: the wheel holds the dark band alone at a fuller size, and the
   attachment quiz stands as its own compact band above the next-step
   invitation. */
.tt-quizhero--wheel .ttwo {
  --ttwo-w: 580px;
  max-width: 580px;
  margin: 0 auto;
}
.tt-quizhero--quiz {
  padding: 3.6rem 0 4rem;
}

/* ============================================================
   v1.95.2: the inline wheel as a half wheel. The full circle
   rises behind a horizon cut just under the hub, so the dome of
   feelings and the full readout show while the lower half stays
   beneath the surface. No zoom, no panning, no fades: one clean
   composition. The floating popup variant keeps the old stage.
   ============================================================ */
.tt-quizhero--wheel .ttwo {
  --ttwo-w: 440px;
  --ttwo-zoom: 1;
  max-width: 440px;
  margin: 0 auto;
}
/* The clip does the framing, so the pan machinery stands down. */
.tt-quizhero--wheel .ttwo .ttwo-stage {
  overflow: hidden;
}
.tt-quizhero--wheel .ttwo .ttwo-canvas {
  /* 62% keeps the whole hub dome and all four readout lines above the
     cut; the hub circle bottoms out at 61.2% of the viewBox. */
  clip-path: inset(0 0 38% 0);
  margin-bottom: -38%;
  transform: none;
}
.tt-quizhero--wheel .ttwo .ttwo-fade,
.tt-quizhero--wheel .ttwo .ttwo-hint {
  display: none;
}
/* Thinner card: the wheel is the ornament, the form is the ask, and the
   space between them tightens now that nothing scrolls. */
.tt-quizhero--wheel .ttwo .ttwo-head {
  padding-bottom: calc(8 * var(--s));
}
.tt-quizhero--wheel .ttwo .ttwo-body {
  padding-top: calc(10 * var(--s));
}
/* Once the wheel is on its way, the invitation copy stands down and the
   card closes on the thank-you alone. */
.ttwo--done .ttwo-title,
.ttwo--done .ttwo-text {
  display: none;
}

/* v1.95.3: the wheel card can be waved away. The X sits on the card's
   shoulder, and the quiz invitation inherits the band when it goes. */
.tt-quizhero__wheel {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}
.tt-quizhero__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  font-size: 25px;
  line-height: 1;
  color: var(--tt-champagne);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}
.tt-quizhero__close:hover,
.tt-quizhero__close:focus-visible {
  opacity: 1;
}
.tt-quizhero__swap {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  animation: tt-adpop-rise 0.32s cubic-bezier(0.16, 0.7, 0.3, 1);
}
.tt-quizhero__swap .tt-quizhero__art {
  margin: 0 auto 1.2rem;
}
@media (prefers-reduced-motion: reduce) {
  .tt-quizhero__swap {
    animation: none;
  }
}

/* ============================================================
   v1.96.0: the expert pass. The Triangle art on a spruce arch
   with fern line-work, answer buttons worth pressing, proof by
   numbers under the lede, the verify line inside the decision,
   and a per-market video breathing behind the dark band.
   ============================================================ */

/* --- The arch panel: gold art on deep green, ferns in the corners --- */
.tt-hero3__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 3.2rem 2rem 2.6rem;
  border-radius: 230px 230px var(--tt-radius-card) var(--tt-radius-card);
  background:
    radial-gradient(85% 55% at 50% 8%, rgba(201, 162, 75, 0.12) 0%, rgba(201, 162, 75, 0) 60%),
    linear-gradient(170deg, #1E5041 0%, #173B30 52%, #0F2B24 100%);
  box-shadow: 0 24px 60px rgba(18, 63, 56, 0.18);
  overflow: hidden;
}
.tt-hero3__panel .tt-hero3__art,
.tt-hero3__panel .tt-hero3__art--bindu {
  position: relative;
  z-index: 1;
  max-width: 100%;
}
.tt-hero3__fern {
  position: absolute;
  width: 110px;
  height: auto;
  opacity: 0.7;
  pointer-events: none;
}
.tt-hero3__fern--tl {
  top: 26px;
  left: 6px;
  transform: rotate(14deg);
}
.tt-hero3__fern--br {
  right: 4px;
  bottom: 10px;
  transform: rotate(-166deg);
}

/* --- Answer buttons someone would want to press --- */
.tt-hero3 .tt-option {
  background: #FFFFFF;
  color: var(--tt-ink);
  border-color: var(--tt-hairline);
  font-weight: 500;
  text-align: left;
  padding-left: 1.05rem;
}
.tt-hero3 .tt-option::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--tt-champagne);
  margin-right: 0.55rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  vertical-align: 1px;
}
.tt-hero3 .tt-option:hover,
.tt-hero3 .tt-option:focus-visible {
  border-color: var(--tt-teal);
  background: var(--tt-water-tint);
  color: var(--tt-ink);
}
.tt-hero3 .tt-option:hover::before,
.tt-hero3 .tt-option:focus-visible::before,
.tt-hero3 .tt-option.is-selected::before {
  opacity: 1;
  transform: translateX(0);
}
.tt-hero3 .tt-option.is-selected {
  border-color: var(--tt-teal);
  background: var(--tt-water-tint);
  color: var(--tt-ink);
}

/* --- The card chrome, one step finer --- */
.tt-hero3 .tt-matcher {
  border-top-width: 2px;
  box-shadow: 0 16px 40px rgba(18, 63, 56, 0.08);
}

/* --- Proof by numbers --- */
.tt-hero3__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0;
  font-size: 0.82rem;
  color: var(--tt-sage-mute);
  margin: -0.6rem 0 1.5rem;
}
.tt-hero3__stat + .tt-hero3__stat::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tt-champagne);
  margin: 0 0.6rem;
  vertical-align: 2px;
}
.tt-hero3__stats b {
  color: var(--tt-teal);
  font-weight: 600;
}

/* --- The verify line, now a card footnote --- */
.tt-matcher .tt-hero3__verify {
  border-top: 1px solid var(--tt-hairline);
  padding-top: 0.8rem;
  margin-top: 0.9rem;
}

/* --- The band's breathing background --- */
.tt-quizhero {
  position: relative;
}
.tt-quizhero .tt-container {
  position: relative;
  z-index: 2;
}
.tt-quizhero__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.tt-quizhero__video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.tt-quizhero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 135vw;
  height: 75.94vw;
  min-width: 240vh;
  min-height: 135%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.tt-quizhero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201, 162, 75, 0.1) 0%, rgba(201, 162, 75, 0) 62%),
    linear-gradient(172deg, rgba(30, 80, 65, 0.55) 0%, rgba(23, 59, 48, 0.66) 48%, rgba(12, 38, 32, 0.8) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .tt-quizhero__video {
    display: none;
  }
}

/* v1.96.3: the arch becomes a window. Video masked inside the rounded
   arch, a spruce scrim keeping the gold art legible, the flat green
   surviving only as the fallback when no video is set. */
.tt-hero3__panelvideo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.tt-hero3__panelvideo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tt-hero3__panelvideo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 118%;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.tt-hero3__panelscrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(85% 55% at 50% 8%, rgba(201, 162, 75, 0.1) 0%, rgba(201, 162, 75, 0) 60%),
    linear-gradient(170deg, rgba(30, 80, 65, 0.62) 0%, rgba(23, 59, 48, 0.68) 52%, rgba(15, 43, 36, 0.78) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .tt-hero3__panelvideo {
    display: none;
  }
}

/* ============================================================
   v1.97.0: the split hero. The media panel stops being a shape
   beside the content and becomes the hero's right half: full
   bleed to the viewport edge and the header line, video covering
   by construction so letterboxing cannot occur, the Triangle art
   floating over it, a champagne frame inset like a gallery hang.
   ============================================================ */
.tt-hero3 {
  padding: 0;
  overflow: hidden;
}
.tt-hero3__grid {
  align-items: stretch;
  gap: 0;
}
.tt-hero3__ask {
  padding: 4rem 3.5rem 4.5rem 0;
}
.tt-hero3__artcol {
  /* Bleed from the centered container to the viewport's right edge. */
  margin-right: calc(50% - 50vw);
  justify-content: stretch;
  padding: 0;
}
.tt-hero3__panel {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 620px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The gallery frame: a hairline of champagne, inset, over everything. */
.tt-hero3__panel::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(201, 162, 75, 0.5);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}
.tt-hero3__panel .tt-hero3__art,
.tt-hero3__panel .tt-hero3__art--bindu {
  width: 74%;
  max-width: 460px;
}
/* Cover by construction: container units size the frame past both
   dimensions, so no aspect mismatch can leave a bar. */
.tt-hero3__panelvideo {
  container-type: size;
}
.tt-hero3__panelvideo iframe {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 135% overscan: YouTube's title bar and disclosure overlays live at
     the video's top and bottom edges, and oversizing the frame pushes
     those zones outside the panel where the overflow clips them. */
  width: max(135cqw, calc(135cqh * 1.7778));
  height: max(135cqh, calc(135cqw * 0.5625));
  aspect-ratio: auto;
}
/* The scrim eases off toward the top so the footage breathes, and
   deepens at the base where the labels live. */
.tt-hero3__panelscrim {
  background:
    radial-gradient(85% 55% at 50% 8%, rgba(201, 162, 75, 0.08) 0%, rgba(201, 162, 75, 0) 60%),
    linear-gradient(178deg, rgba(23, 59, 48, 0.34) 0%, rgba(23, 59, 48, 0.5) 55%, rgba(15, 43, 36, 0.72) 100%);
}
@media (max-width: 820px) {
  .tt-hero3__ask {
    padding: 2.4rem 0 3rem;
  }
  .tt-hero3__artcol {
    /* Full-bleed banner above the content on small screens. */
    order: -1;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .tt-hero3__panel {
    min-height: 340px;
  }
  .tt-hero3__panel .tt-hero3__art,
  .tt-hero3__panel .tt-hero3__art--bindu {
    width: 62%;
  }
}

/* v1.97.2: no play buttons, no thumbnails. The video layer is invisible
   until the player reports genuine playback, then breathes in over the
   gradient. If playback never begins, the gradient simply remains. */
.tt-quizhero__video,
.tt-hero3__panelvideo {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.tt-quizhero__video.is-playing,
.tt-hero3__panelvideo.is-playing {
  opacity: 1;
}

/* v1.97.3: the Triangle mark sits above the headline on ivory, and the
   media panel exists only when a market has footage; without it the
   hero settles into a single centered-content column. */
.tt-hero3__mark {
  max-width: 320px;
  margin-bottom: 1.3rem;
  color: var(--tt-teal);
}
.tt-hero3__mark svg {
  width: 100%;
  height: auto;
  display: block;
}
.tt-hero3--nomedia .tt-hero3__grid {
  grid-template-columns: 1fr;
}
/* Without footage, the hero recomposes as a centered masthead: the
   Triangle mark as a crest, the headline beneath it, the matcher as the
   centerpiece below. Symmetry turns the spare width into margins
   instead of a void. */
.tt-hero3--nomedia .tt-hero3__ask {
  padding: 3.2rem 0 4.2rem;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.tt-hero3--nomedia .tt-hero3__mark {
  max-width: 280px;
  margin: 0 auto 1rem;
}
.tt-hero3--nomedia .tt-hero3__title {
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
}
.tt-hero3--nomedia .tt-hero3__lede {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.tt-hero3--nomedia .tt-hero3__stats {
  justify-content: center;
}
.tt-hero3--nomedia .tt-hero3__ask .tt-matcher {
  max-width: 760px;
  margin: 2rem auto 0;
  text-align: left;
}
@media (max-width: 820px) {
  .tt-hero3--nomedia .tt-hero3__ask {
    padding: 2.4rem 0 3rem;
  }
}
@media (max-width: 820px) {
  .tt-hero3__mark {
    max-width: 250px;
  }
}

/* v1.97.8: the consult form says plainly where the note travels. */
.tt-consult__privacy {
  font-size: 0.78rem;
  color: var(--tt-sage-mute);
  line-height: 1.55;
  margin: 0.5rem 0 0;
}

/* v1.98.0: the footer's living shimmer. Footage under a deep scrim, so
   the night green breathes without ever fighting the small text above
   it. Front page only; every other page keeps a silent footer. */
.tt-footer2 {
  position: relative;
}
.tt-footer2 > .tt-container {
  position: relative;
  z-index: 2;
}
.tt-footer2__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.tt-footer2__video.is-playing {
  opacity: 1;
}
.tt-footer2__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tt-footer2__video {
  container-type: size;
}
.tt-footer2__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Sized in container units so the frame covers the footer in both
     dimensions while never leaving 16:9: an off-ratio frame makes
     YouTube letterbox inside itself, and on the tall mobile footer that
     bar was landing exactly over the brand block. */
  width: max(135cqw, calc(135cqh * 1.7778));
  height: max(135cqh, calc(135cqw * 0.5625));
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.tt-footer2__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(176deg, rgba(12, 38, 32, 0.86) 0%, rgba(10, 32, 27, 0.92) 55%, rgba(8, 28, 24, 0.96) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .tt-footer2__video {
    display: none;
  }
}

/* ============================================================
   v1.99.0: the weekly availability card. A gold day rail down
   the left, each opening a champagne chip, closed days a quiet
   dash, the freshness date earning trust at the corner.
   ============================================================ */
.tt-weekslots__card {
  background: #FFFFFF;
  border: 1px solid var(--tt-hairline);
  border-top: 2px solid var(--tt-champagne);
  border-radius: var(--tt-radius);
  padding: 1.1rem 1.3rem 0.9rem;
  max-width: 560px;
}
.tt-weekslots__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.42rem 0;
}
.tt-weekslots__row + .tt-weekslots__row {
  border-top: 1px solid #F0EBDD;
}
.tt-weekslots__day {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep, #8A6D1F);
}
.tt-weekslots__row--closed .tt-weekslots__day {
  color: var(--tt-sage-mute);
  font-weight: 500;
}
.tt-weekslots__times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
}
.tt-weekslots__chip {
  font-size: 0.8rem;
  color: var(--tt-ink);
  background: #FBF8F1;
  border: 1px solid rgba(198, 161, 91, 0.45);
  border-radius: 999px;
  padding: 0.14rem 0.65rem;
  white-space: nowrap;
}
.tt-weekslots__closed {
  color: #C8C2B2;
}
.tt-weekslots__note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.7rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid #F0EBDD;
  font-size: 0.74rem;
  color: var(--tt-sage-mute);
}
.tt-weekslots__fresh {
  color: var(--tt-champagne-deep, #8A6D1F);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .tt-weekslots__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding: 0.55rem 0;
  }
}

/* v1.99.2: View Schedule on the living card. A sibling of the card
   anchor rather than a child, since a link cannot live inside a link,
   floated into the card's lower-left to balance Save Contact. */
.tt-herocard-wrap {
  position: relative;
}
.tt-herocard__schedule {
  position: absolute;
  right: 12px;
  bottom: 56px;
  z-index: 3;
  white-space: nowrap;
  background: rgba(18, 63, 56, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFFDF8;
  border: 1px solid rgba(198, 161, 91, 0.75);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tt-herocard__schedule:hover,
.tt-herocard__schedule:focus-visible {
  background: rgba(18, 63, 56, 0.85);
  border-color: var(--tt-champagne);
  color: #FFFDF8;
}
/* The landing glow: a champagne ring that breathes once. */
.tt-weekslots.is-spotlit .tt-weekslots__card {
  animation: tt-weekslots-glow 1.6s ease-out;
}
@keyframes tt-weekslots-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(198, 161, 91, 0);
  }
  25% {
    box-shadow: 0 0 0 4px rgba(198, 161, 91, 0.45);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(198, 161, 91, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt-weekslots.is-spotlit .tt-weekslots__card {
    animation: none;
  }
}

/* ============================================================
   v1.99.12: the closing panel's artwork. The image lives on the
   panel's right, and the dusk gradient crossfades over it toward
   the text, so the painting stays unmuted where it shows and the
   invitation stays readable where it speaks. The bridge under
   "Ready to take the next step?" is the message drawn.
   ============================================================ */
.tt-nextstep__panel--art {
  position: relative;
  overflow: hidden;
  /* The panel used to be only as tall as its paragraphs, which cropped
     the painting mid-bridge. With artwork present it earns real height,
     so the composition shows whole: arch, water, and banks. */
  min-height: 540px;
  align-content: center;
}
.tt-nextstep__art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70%;
  overflow: hidden;
  z-index: 0;
}
/* The image is a real element sized by its own proportions, full panel
   height against the right edge, and the mask feathers its actual left
   edge into the dusk wherever that edge falls. No box-coordinate
   gradient, so no banding over empty green at any screen size. */
.tt-nextstep__art img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 150px);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 150px);
}
.tt-nextstep__panel--art > *:not(.tt-nextstep__art) {
  position: relative;
  z-index: 1;
}
@media (max-width: 820px) {
  .tt-nextstep__art {
    width: 100%;
  }
  .tt-nextstep__art img {
    width: 100%;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* On one column the text sits over the art, so a veil covers it. */
  .tt-nextstep__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(46, 102, 84, 0.88) 0%, rgba(36, 83, 68, 0.82) 55%, rgba(26, 74, 60, 0.7) 100%);
  }
}

/* Desktop balance for the closing panel. The 540px floor was set so a
   tall painting showed whole, but with artwork present it leaves a
   large empty green field beside four lines of text, and a 70% wide
   picture runs on under the button column. Both are dialled back here
   only, above the one-column breakpoint, so the mobile composition
   that already reads well is untouched. */
@media (min-width: 821px) {
  .tt-nextstep__panel--art {
    min-height: clamp(360px, 30vw, 430px);
  }
  .tt-nextstep__art {
    width: 52%;
  }
  /* The picture keeps its own proportions inside that narrower field,
     so it shrinks rather than crops, and its feathered edge lands
     clear of the words. */
  .tt-nextstep__art img {
    max-width: 100%;
    object-position: right center;
  }
}

/* v1.99.17: the designed composition for art behind the hero. Words
   own the left over near-solid ivory, the veil dissolves rightward,
   and the painting stands almost clear on the right: the same
   crossfade motif as the closing panel, so the page opens and closes
   in one language. The orbit mark stands down here, because the
   painting now does its decorative work. */
.tt-hero3--imgbg {
  position: relative;
  background-size: cover;
  background-position: center;
}
.tt-hero3--imgbg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(251, 249, 244, 0.97) 0%,
    rgba(251, 249, 244, 0.94) 36%,
    rgba(251, 249, 244, 0.72) 56%,
    rgba(251, 249, 244, 0.3) 78%,
    rgba(251, 249, 244, 0.08) 100%);
}
.tt-hero3--imgbg .tt-hero3__grid {
  position: relative;
  z-index: 1;
}
.tt-hero3--imgbg .tt-hero3__mark {
  display: none;
}
.tt-hero3--imgbg.tt-hero3--nomedia .tt-hero3__ask {
  max-width: none;
  margin: 0;
  text-align: left;
  padding: 4rem 0 4.5rem;
}
.tt-hero3--imgbg.tt-hero3--nomedia .tt-hero3__title,
.tt-hero3--imgbg.tt-hero3--nomedia .tt-hero3__lede {
  max-width: 21ch;
}
.tt-hero3--imgbg.tt-hero3--nomedia .tt-hero3__lede {
  max-width: 48ch;
  margin-left: 0;
}
.tt-hero3--imgbg.tt-hero3--nomedia .tt-hero3__stats {
  justify-content: flex-start;
}
.tt-hero3--imgbg.tt-hero3--nomedia .tt-hero3__ask .tt-matcher {
  max-width: 640px;
  margin-left: 0;
}
@media (max-width: 820px) {
  /* One column returns to the vertical veil: readable everywhere,
     painting breathing through at the base. */
  .tt-hero3--imgbg::before {
    background: linear-gradient(180deg,
      rgba(251, 249, 244, 0.96) 0%,
      rgba(251, 249, 244, 0.9) 55%,
      rgba(251, 249, 244, 0.72) 100%);
  }
  .tt-hero3--imgbg.tt-hero3--nomedia .tt-hero3__ask {
    padding: 2.4rem 0 3rem;
  }
}

/* v1.99.27: the panel backdrop. A second image lies behind the text
   side under a deep dusk veil, texture rather than picture, its right
   edge feathering away before the main painting begins so the two
   artworks never touch. Desktop only. */
.tt-nextstep__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 58%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, #000 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, #000 62%, rgba(0, 0, 0, 0) 100%);
}
.tt-nextstep__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(168deg, rgba(46, 102, 84, 0.86) 0%, rgba(36, 83, 68, 0.84) 55%, rgba(26, 74, 60, 0.88) 100%);
}
.tt-nextstep__panel--art > *:not(.tt-nextstep__art):not(.tt-nextstep__backdrop) {
  position: relative;
  z-index: 1;
}
@media (max-width: 820px) {
  .tt-nextstep__backdrop {
    display: none;
  }
}

/* ============================================================
   v1.99.39: the public Card Studio. Subscribe, compose, share.
   ============================================================ */
.tt-studio {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.tt-studio__title {
  font-family: var(--tt-font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  color: var(--tt-ink);
  margin: 0 0 0.8rem;
}
.tt-studio__lede {
  color: var(--tt-sage-mute);
  line-height: 1.75;
  max-width: 54ch;
  margin: 0 auto 1.8rem;
}
.tt-studio__field {
  display: block;
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: var(--tt-font-body);
  font-size: 0.95rem;
  color: var(--tt-ink);
  background: #FFFFFF;
  border: 1px solid var(--tt-hairline);
  border-radius: var(--tt-radius);
  margin-bottom: 0.7rem;
}
.tt-studio__field:focus {
  outline: 0;
  border-color: var(--tt-teal);
}
.tt-studio__label {
  display: block;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep, #8A6D1F);
  margin: 1.4rem 0 0.5rem;
}
/* The collection, not a row of form controls: fewer pieces per row, at
   the card's own 4:5, each one named. Twenty unnamed thumbnails read as
   clip art; the same twenty named read as a collection. */
.tt-studio__arts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 22px 18px;
  margin-bottom: 1.4rem;
}
.tt-studio__art {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
}
.tt-studio__artframe {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--tt-hairline);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.tt-studio__art:hover .tt-studio__artframe {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(18, 63, 56, 0.16), 0 0 0 1px var(--tt-hairline);
}
.tt-studio__art.is-on .tt-studio__artframe {
  box-shadow: 0 0 0 1px var(--tt-champagne), 0 0 0 4px rgba(201, 162, 75, 0.22);
}
.tt-studio__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The name is the point. Display face, not the interface face. */
.tt-studio__artname {
  display: block;
  margin-top: 9px;
  font-family: var(--tt-font-display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--tt-ink);
}
.tt-studio__art--none .tt-studio__artframe {
  background: #F4F1E8;
}
.tt-studio__nonelabel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tt-font-body);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tt-sage-mute);
}
/* The words shelf: chips narrow it, tiles read like small title
   pages, the chosen one wears the same gold halo as chosen art. */
.tt-studio__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.tt-studio__chip {
  border: 1px solid var(--tt-hairline);
  background: var(--tt-ivory);
  color: var(--tt-sage-mute);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.tt-studio__chip:hover { background: var(--tt-water-tint, #E9F2EE); border-color: var(--tt-water, #5FA79B); color: var(--tt-teal-hover, #175A50); }
.tt-studio__chip.is-on {
  background: var(--tt-teal);
  border-color: var(--tt-teal);
  color: var(--tt-ivory);
}
.tt-studio__words {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 1.4rem;
}
.tt-studio__word {
  text-align: left;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 4px;
  background: var(--tt-ivory);
  box-shadow: 0 0 0 1px var(--tt-hairline);
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.tt-studio__word:hover { transform: translateY(-2px); }
.tt-studio__word.is-on {
  box-shadow: 0 0 0 1px var(--tt-champagne), 0 0 0 4px rgba(201, 162, 75, 0.22);
}
.tt-studio__wordtitle {
  display: block;
  font-family: var(--tt-font-display);
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--tt-ink);
}
.tt-studio__wordmeta {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--tt-sage-mute);
}
.tt-studio__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.tt-studio__make {
  margin-top: 1.4rem;
}
.tt-studio__link {
  font-size: 0.82rem;
  color: var(--tt-sage-mute);
}
.tt-studio__share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1rem;
}
.tt-studio__foot {
  margin-top: 1.4rem;
  font-size: 0.85rem;
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  align-items: center;
}
.tt-studio__again {
  background: none;
  border: 0;
  color: var(--tt-sage-mute);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
}
.tt-studio__error {
  color: #8A6D1F;
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
}
@media (max-width: 600px) {
  .tt-studio__row { grid-template-columns: 1fr; }
}

/* ============================================================
   v1.99.42: the living preview. The card takes shape beside the
   form as it is written, so the composer is watching the thing
   they are making rather than filling in boxes.
   ============================================================ */
.tt-studio {
  max-width: 1040px;
}
.tt-studio__stage {
  display: grid;
  /* 440px is the card's own width, so the preview is a true replica
     rather than a scale model. The form column reflows around it. */
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 2.6rem;
  align-items: start;
  text-align: left;
  margin-top: 1.6rem;
}
.tt-studio__preview {
  position: sticky;
  top: 90px;
}
.tt-studio__previewlabel {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep, #8A6D1F);
  margin: 0 0 0.7rem;
  text-align: center;
}
.tt-pcard {
  border-radius: 16px;
  overflow: hidden;
  background: #FBF9F4;
  position: relative;
  box-shadow:
    0 20px 50px rgba(18, 63, 56, 0.22),
    0 0 22px rgba(201, 162, 75, 0.16);
}
/* Above the artwork, not beneath it: an inset shadow would be hidden by
   the painting that fills the card. */
.tt-pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  border: 1px solid rgba(201, 162, 75, 0.9);
  box-shadow: inset 0 0 0 3px rgba(201, 162, 75, 0.16);
  transition: opacity 0.8s ease;
}
.tt-pcard__art {
  position: relative;
  /* The card's art box is 440 by 550, which is exactly 4:5, the same
     ratio the artwork is uploaded at. A fixed height cropped portrait
     pieces to nearly square here, so the preview framed the art
     differently from the card it was previewing. Stated as a ratio it
     stays true at every width, including the stacked layout below. */
  aspect-ratio: 4 / 5;
  background: linear-gradient(170deg, #1E5041, #123F38);
}
.tt-pcard__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tt-pcard__alt {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.tt-pcard__art.showalt .tt-pcard__alt {
  opacity: 1;
}
.tt-pcard__flip {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #FBF9F4;
  background: rgba(18, 63, 56, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 162, 75, 0.7);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
}
.tt-pcard__body {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  padding: 20px 22px 18px;
}
.tt-pcard__heading {
  font-family: var(--tt-font-display);
  font-size: 1.35rem;
  color: var(--tt-ink);
  margin: 0 0 8px;
  line-height: 1.2;
}
.tt-pcard__msg {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #3C5A52;
  margin: 0;
  white-space: pre-line;
}
.tt-pcard__msg.is-empty {
  color: #A9B3AD;
  font-style: italic;
}
.tt-pcard__from {
  font-family: var(--tt-font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--tt-ink);
  margin: 14px 0 0;
}
.tt-pcard__foot {
  padding: 10px 22px 14px;
  border-top: 1px solid #EDE6D4;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-champagne-deep, #8A6D1F);
}
@media (max-width: 900px) {
  .tt-studio__stage {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  /* On one column the card leads, so the writing has something to
     answer to rather than arriving after the fact. */
  .tt-studio__preview {
    position: static;
    order: -1;
    max-width: 440px;
    margin: 0 auto;
  }
}

/* At full size the card runs roughly 715px tall, more once the message
   fills out. Sticking it 90px down a shorter viewport would park the
   footer below the fold for the whole session, where scrolling could
   never reach it. Under that height it simply travels with the page. */
@media (max-height: 860px) {
  .tt-studio__preview {
    position: static;
  }
}

/* v1.99.44: moving reveals. A clip plays once over its own artwork and
   settles onto it as the final still, in the card and in the preview. */
.tt-studio__vidbadge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(18, 63, 56, 0.75);
  color: #FBF9F4;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
}
/* The music badge: the same pill, gold, in the opposite corner. It
   must come after the base rule it overrides, since both selectors
   weigh the same and the later one wins; written before it, the base
   rule's bottom pin re-applies, and top plus bottom together stretch
   the pill down the whole frame. That was v1.99.77's bug. */
.tt-studio__vidbadge--music {
  bottom: auto;
  top: 6px;
  background: rgba(138, 109, 31, 0.82);
}
.tt-studio__art { position: relative; }
.tt-pcard__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.7s ease;
}
.tt-pcard__art.playing .tt-pcard__vid { opacity: 1; }

/* v1.99.45: YouTube reveals in the preview, oversized so the player's
   own chrome falls outside the card's frame. */
.tt-pcard__art { container-type: size; }
.tt-pcard__yt { overflow: hidden; pointer-events: none; }
.tt-pcard__yt iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(135cqw, calc(135cqh * 1.7778));
  height: max(135cqh, calc(135cqw * 0.5625));
  transform: translate(-50%, -50%);
  border: 0;
}

/* v1.99.50: the preview mirrors the card, gilded on the cover and bare
   once the reveal is showing. */
.tt-pcard:has(.tt-pcard__art.showalt)::after {
  opacity: 0;
}

/* ============================================================
   v1.99.54: the Card Studio page. The hero is the artwork, held
   as a fan of cards; choosing one from the fan begins a card
   with that painting. Everything else stays quiet so the deck
   is the thing this page is remembered by.
   ============================================================ */
.tt-cardshero {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(201, 162, 75, 0.16) 0%, rgba(201, 162, 75, 0) 62%),
    linear-gradient(170deg, #1E5041 0%, #173B30 52%, #0F2B24 100%);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.4rem, 8vw, 5.5rem);
  text-align: center;
  overflow: hidden;
}
.tt-cardshero__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tt-champagne);
  margin: 0 0 1.1rem;
}
.tt-cardshero__title {
  font-family: var(--tt-font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.12;
  color: #F5F1E6;
  margin: 0 auto 1rem;
  max-width: 16ch;
  text-wrap: balance;
}
.tt-cardshero__lede {
  color: rgba(241, 231, 211, 0.7);
  line-height: 1.8;
  font-size: 0.98rem;
  max-width: 56ch;
  margin: 0 auto;
}

/* The fan. Cards overlap and lean, the way a hand of cards sits. */
.tt-deck {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-bottom: 1rem;
}
.tt-deck__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(112px, 15vw, 178px);
  aspect-ratio: 4 / 5;
  margin: 0 clamp(-26px, -2.4vw, -16px);
  padding: 0;
  border: 0;
  background: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(6, 24, 20, 0.45);
  transform: rotate(calc((var(--i) - 2) * 6deg)) translateY(calc(abs(var(--i) - 2) * 9px));
  transition: transform 0.45s cubic-bezier(0.16, 0.7, 0.3, 1), box-shadow 0.45s ease;
  animation: tt-deck-fan 0.9s cubic-bezier(0.16, 0.7, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 90ms);
}
.tt-deck__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(201, 162, 75, 0.85);
  box-shadow: inset 0 0 0 3px rgba(201, 162, 75, 0.16);
  pointer-events: none;
}
.tt-deck__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tt-deck__card:hover,
.tt-deck__card:focus-visible {
  z-index: 3;
  transform: rotate(calc((var(--i) - 2) * 6deg)) translateY(-14px) scale(1.05);
  box-shadow: 0 26px 54px rgba(6, 24, 20, 0.55);
}
@keyframes tt-deck-fan {
  from {
    opacity: 0;
    transform: rotate(0deg) translateY(30px);
  }
}
.tt-deck__hint {
  margin: 1.4rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(241, 231, 211, 0.42);
}

.tt-cardsfoot {
  border-top: 1px solid var(--tt-hairline);
  padding: 2.2rem 0 3rem;
  background: var(--tt-ivory);
}
.tt-cardsfoot__line {
  margin: 0;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--tt-sage-mute);
  max-width: 62ch;
  margin-inline: auto;
}
.tt-cardsfoot__line a {
  color: var(--tt-champagne-deep, #8A6D1F);
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Three cards read as a fan on a phone; five become a smear. */
  .tt-deck__card:nth-child(n + 4) { display: none; }
  .tt-deck__card { margin: 0 -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-deck__card { animation: none; }
}


/* ============================================================
   v1.99.96: the wheel card fills its band on desktop.

   The card was pinned at 440px, which is about the width of a
   phone, so the composition reads correctly on mobile and sits
   marooned in the middle of a wide dark band. Every dimension
   inside the card derives from --s, which is --ttwo-w divided by
   460, so raising that one value scales the wheel, the type, the
   field and the button together and the proportions that already
   work are preserved exactly. The wrapper is capped at the same
   width or it would clamp the card back down.

   Below 821px nothing here applies, so the mobile card is
   untouched.
   ============================================================ */
@media (min-width: 821px) {
  .tt-quizhero--wheel .ttwo {
    --ttwo-w: clamp(440px, 52vw, 680px);
    max-width: clamp(440px, 52vw, 680px);
  }
  .tt-quizhero__wheel {
    max-width: clamp(440px, 52vw, 680px);
  }
}