/* ==========================================================================
   Inner pages: the same world as the home page, without the descent.
   Two shapes: a reading page (title band, then the words) and a feature page
   (one calm photo, title band, the words, one stone-color strip at the end).
   Loads after site.css and only uses its tokens.
   ========================================================================== */

body.inner { background: var(--paper); }
.inner main { position: relative; }

/* ---- One calm photo at the top of a feature page -------------------------- */
.page-photo { position: relative; overflow: hidden; height: clamp(14rem, 38vw, 30rem); background: var(--sky-haze); }
.page-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
@media (max-width: 43.75em) { .page-photo { height: clamp(14rem, 62vw, 22rem); } }

/* ---- Title band: the top stone's greige, like the welcome band ------------ */
.page-title { background: var(--greige); padding-block: clamp(var(--s-5), 6vw, var(--s-7)) clamp(var(--s-5), 6vw, var(--s-7)); }
.page-title__inner, .page-body, .page-strip__inner, .page-nav__inner {
  max-width: 82rem; margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.page-title .label { color: var(--ink); margin-bottom: var(--s-2); }
.page-title h1 { font-size: var(--t-h2); max-width: 24ch; }
.page-title .lead { margin-top: var(--s-3); max-width: var(--measure); }
.page-title .btn { margin-top: var(--s-4); }
.page-title__note { margin-top: var(--s-3); font-weight: 500; color: var(--ink); }
.page-title--wide h1 { max-width: 30ch; }

/* a quick-action card inside the title band: who the buttons are for */
.quick { margin-top: var(--s-5); max-width: 46rem; padding: clamp(var(--s-3), 3vw, var(--s-4)); border-radius: var(--radius); background: var(--paper); }
.quick__line { font-size: var(--t-small); font-weight: 500; }
.quick .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.quick__note { margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink-soft); }
.quick__note a { color: var(--ink); }

/* ---- Jump links under the title (reading pages with many sections) -------- */
.page-nav { border-bottom: 1px solid rgba(48, 49, 43, 0.1); background: var(--paper); }
.page-nav__inner { display: flex; flex-wrap: wrap; gap: 0.25rem var(--s-2); padding-block: var(--s-2); }
.page-nav a { display: inline-block; padding: 0.7rem 0.2rem; font-size: var(--t-small); font-weight: 500; text-decoration-color: rgba(143, 85, 56, 0.45); }

/* ---- The words ------------------------------------------------------------- */
.page-body { padding-block: clamp(var(--s-6), 7vw, var(--s-8)); display: grid; gap: var(--s-7); }
@media (min-width: 60em) { .page-body--aside { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: var(--s-8); align-items: start; } }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-3); }
.prose h2 { margin-top: var(--s-7); font-size: var(--t-h3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-5); font-size: 1.35rem; line-height: 1.25; }
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul, .prose h2 + .cards { margin-top: var(--s-3); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--s-1); }
.prose .lead { font-size: var(--t-lead); }
.prose .fine { font-size: var(--t-small); color: var(--ink-soft); }
.prose .label { margin-top: var(--s-7); margin-bottom: 0; }
.prose .label + h2 { margin-top: var(--s-1); }
.prose .btn { margin-top: var(--s-3); }
.prose sup { font-size: 0.7em; line-height: 0; }
.prose .refs { font-size: var(--t-small); color: var(--ink-soft); }
.prose .refs b { color: var(--ink); font-weight: 600; }

/* paired lines: a bold lead and its explanation, ruled like the handouts */
.pairs { list-style: none; margin: var(--s-3) 0 0; padding: 0; border-top: 1px solid var(--greige); }
.pairs li { padding: var(--s-2) 0; border-bottom: 1px solid var(--greige); }
.pairs li + li { margin-top: 0; }
.pairs h3 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--t-body); line-height: 1.4; }
.pairs p { margin-top: 0.25rem; }

/* two columns of short text with a shared band beneath: "tandem care" */
.tandem { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
@media (min-width: 46em) { .tandem { grid-template-columns: 1fr 1fr; } }
.tandem > div { border-top: 1px solid var(--ink); padding-top: var(--s-2); }
.tandem h3 { margin: 0 0 var(--s-1); font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.tandem h3.is-mine { color: var(--terracotta-deep); }
.shared { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: 0.75rem; background: var(--sage-deep); color: var(--paper); }

/* a quiet action block inside the flow: the "To refer" card */
.action-card { margin-top: var(--s-3); padding: clamp(var(--s-3), 4vw, var(--s-5)); border-radius: var(--radius); background: var(--clay-paper); }
.action-card .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.action-card p + p { margin-top: var(--s-2); }

/* ---- Sidebar card: practice at a glance ------------------------------------ */
.aside { padding: clamp(var(--s-3), 3vw, var(--s-4)); border-radius: var(--radius); background: var(--clay-paper); }
.aside h2 { font-size: var(--t-h3); }
.aside__contact { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-top: var(--s-2); font-weight: 500; }
.aside__phone { margin-top: var(--s-1); font-weight: 500; }
.aside dl { margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
.aside dt { font-weight: 600; }
.aside dd { margin: 0; font-size: var(--t-small); }
.aside .fine { margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink-soft); }
.aside h3 { margin-top: var(--s-3); font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.aside ul { margin: var(--s-1) 0 0; padding-left: 1.1rem; font-size: var(--t-small); }
.aside .more { margin-top: var(--s-2); font-size: var(--t-small); }
.aside .more + .more { margin-top: var(--s-1); }

/* ---- Handout cards ---------------------------------------------------------- */
.cards { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 46em) { .cards { grid-template-columns: 1fr 1fr; } }
.card { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3); padding: var(--s-3); border: 1px solid rgba(48, 49, 43, 0.1); border-radius: 1.25rem; background: #fff; }
.card + .card { margin-top: 0; }
.card__cover { display: block; width: 100%; height: auto; border: 1px solid rgba(48, 49, 43, 0.1); border-radius: 0.4rem; }
.card .label { font-size: 1rem; margin-bottom: 0.25rem; }
.card h3, .card h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.card p { margin-top: var(--s-1); font-size: var(--t-small); }
.card__meta { color: var(--ink-soft); }
.card__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); margin-top: var(--s-1); font-size: var(--t-small); font-weight: 500; }
.card__links a { display: inline-block; padding: 0.6rem 0; }   /* tap target */

/* ---- Buttons: a quiet second style for "Call Joe" --------------------------- */
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(48, 49, 43, 0.35); }
.btn--ghost:hover { background: rgba(48, 49, 43, 0.06); color: var(--ink); }

/* ---- The closing strip on a feature page ------------------------------------ */
.page-strip { position: relative; padding-top: var(--s-6); padding-bottom: var(--s-7); }
.page-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(12rem, 40%, 22rem); background: var(--terracotta); }
.page-strip--sage::before { background: var(--sage); }
.page-strip__inner { position: relative; z-index: 1; }
.page-strip .panel { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(48, 49, 43, 0.08); box-shadow: 0 18px 50px rgba(48, 49, 43, 0.10); max-width: 50rem; }
.page-strip .btn { margin-top: var(--s-3); }
.page-strip .fine { margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink-soft); }

/* ---- Related reading --------------------------------------------------------- */
.related { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 0.25rem; }
.related a { display: inline-block; padding: 0.55rem 0; font-weight: 500; }

/* ---- Print: QR-code landing pages print cleanly -------------------------------- */
@media print {
  .site-header, .site-footer__nav, .page-nav, .skip, .btn { display: none !important; }
  body.inner { background: #fff; }
  .page-title, .aside, .action-card { background: none; padding-inline: 0; }
  .card { break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}

/* ---- Added for the full rollout ----------------------------------------------- */
.pairs--quotes li { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3; font-weight: 500; }
.helps { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
@media (min-width: 46em) { .helps { grid-template-columns: 1fr 1fr; } }
.helps > div { border-top: 1px solid var(--greige); padding-top: var(--s-2); }
.helps .label { margin: 0 0 0.25rem; font-size: 1rem; }
.helps h3 { margin: 0; font-size: 1.35rem; }
.helps p { margin-top: var(--s-1); }
.twobox { display: grid; gap: var(--s-3); margin-top: var(--s-4); padding: clamp(var(--s-3), 4vw, var(--s-4)); border-radius: var(--radius); background: var(--clay-paper); }
@media (min-width: 46em) { .twobox { grid-template-columns: 1fr 1fr; gap: var(--s-4); } .twobox > div + div { border-left: 1px solid var(--greige); padding-left: var(--s-4); } }
.twobox h3 { margin: 0; font-size: 1.3rem; }
.twobox p { margin-top: var(--s-1); }
.cards--one { grid-template-columns: 1fr; max-width: 34rem; }
.related .fine { color: var(--ink-soft); font-weight: 400; }

/* index pages: a grid of plain cards */
.grid-cards { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 46em) { .grid-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70em) { .grid-cards--3 { grid-template-columns: 1fr 1fr 1fr; } }
.grid-cards li { padding: var(--s-3) var(--s-4); border-radius: 1.25rem; background: #fff; border: 1px solid rgba(48, 49, 43, 0.1); }
.grid-cards li + li { margin-top: 0; }
.grid-cards h3 { margin: 0; font-size: 1.35rem; }
.grid-cards p { margin-top: var(--s-1); font-size: var(--t-small); }
.grid-cards .more { margin-top: var(--s-2); font-size: var(--t-small); }
.page-body .grid-cards { max-width: none; }
.prose--wide { max-width: none; }
.prose--wide > p, .prose--wide > ul:not(.grid-cards):not(.cards), .prose--wide > h2, .prose--wide > .fine { max-width: var(--measure); }

/* numbered steps */
.steps { list-style: none; counter-reset: step; margin: var(--s-3) 0 0; padding: 0; }
.steps li { position: relative; padding: var(--s-2) 0 var(--s-2) 3rem; border-top: 1px solid var(--greige); }
.steps li:last-child { border-bottom: 1px solid var(--greige); }
.steps li + li { margin-top: 0; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: var(--s-2); width: 2rem; height: 2rem; border-radius: 50%; background: var(--greige); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; display: grid; place-items: center; }
.steps h3 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--t-body); line-height: 1.4; }
.steps p { margin-top: 0.25rem; }

/* the about page: the headshot beside the words */
.about-grid { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 52em) { .about-grid { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--s-7); } }
.about-grid .stone { width: min(16rem, 60vw); }

/* a shareable note */
.quote-box { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--terracotta); background: var(--clay-paper); border-radius: 0 1rem 1rem 0; }
.quote-box p { margin: 0; }

/* handout gallery filters */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-4); }
.filters button { font: inherit; font-size: var(--t-small); font-weight: 500; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid rgba(48, 49, 43, 0.25); background: transparent; color: var(--ink); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cards[data-filter="providers"] li[data-kind="clients"], .cards[data-filter="clients"] li[data-kind="providers"] { display: none; }

/* a quiet in-page status line (legal page) */
.status { margin-top: var(--s-2); font-size: var(--t-small); color: var(--ink-soft); }
.btn--small-inline { margin-top: var(--s-2); }

/* ---- From the audits ------------------------------------------------------------ */
.fine--spaced, .spaced { margin-top: var(--s-3); }
.actions--flush { margin-top: 0; }