/* Element rules use :where(.page) so the shared components (search card, results panel) keep their own look.
   Every page other than the homepage: the prototype's book page. Header, footer, buttons and the
   search card come from css/atlas-book.css; this file sets the centred column and the content. */
.page { position: relative; z-index: 1; padding: 18px 16px 8px; }
@media (min-width: 700px) { .page { padding-left: 28px; padding-right: 28px; } }
.page-in { max-width: 760px; margin: 0 auto; }
.page-wide .page-in, .page-city .page-in, .page-therapists .page-in, .page-find .page-in { max-width: 1100px; }
:where(.page) h1 { font-family: var(--font-head); font-weight: 400; font-size: clamp(2rem, 6.6vw, 3rem); line-height: 1.08; margin: 6px 0 10px; color: var(--ink); text-wrap: balance; }
:where(.page) h2 { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.5rem, 4.4vw, 2.1rem); line-height: 1.15; margin: 30px 0 8px; color: var(--ink); text-wrap: balance; }
:where(.page) h3 { font-family: var(--font-head); font-weight: 400; font-size: 1.35rem; line-height: 1.2; margin: 18px 0 4px; color: var(--ink); }
:where(.page) h4, :where(.page) h5, :where(.page) h6 { font-family: var(--font-sans); font-weight: 700; font-size: 1.0625rem; margin: 14px 0 4px; }
:where(.page) p, :where(.page) li, :where(.page) dd, :where(.page) td { font-size: 1.0625rem; line-height: 1.65; }
:where(.page) p { margin: 0 0 12px; }
:where(.page) ul, :where(.page) ol { margin: 0 0 14px; padding-left: 1.3em; }
:where(.page) li { margin: 3px 0; }
:where(.page) a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(.page) a:hover { text-decoration-thickness: 2px; }
:where(.page) hr { border: 0; height: 6px; margin: 22px 0; background: var(--pen-line) center / 100% 100% no-repeat; opacity: .5; }
:where(.page) blockquote { margin: 14px 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--ink-line); font-family: var(--font-head); font-style: italic; font-size: 1.15rem; }
:where(.page) img { max-width: 100%; height: auto; border-radius: 4px; }
:where(.page) figure { margin: 16px 0; }
:where(.page) figcaption, .page .meta { font-size: .9375rem; color: var(--ink-soft); }
.page .lede { font-size: 1.15rem; color: var(--ink-soft); text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
.page .eyebrow { margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.page .data-summary { font: 400 1rem/1.6 var(--font-sans); color: var(--ink-soft); }
:where(.page) table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 1rem; display: block; overflow-x: auto; }
:where(.page) th, :where(.page) td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ink-faint); vertical-align: top; }
:where(.page) th { font-family: var(--font-head); font-weight: 400; font-size: 1.1rem; }
/* breadcrumbs and in-page nav: quiet ink */
.page .crumbs { font-size: .9375rem; color: var(--ink-soft); margin: 0 0 6px; }
.page .crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--ink-soft); }
.page .page-nav { margin: 10px 0; }
/* cards: entries on the page, separated by ink rules (the gazetteer), never boxes */
.page .card-list { display: grid; gap: 0; margin: 10px 0 18px; padding: 0; list-style: none; }
.page .card-list > li { list-style: none; }
.page .paper-card { padding: 12px 2px; background: var(--pen-line) left bottom / 100% 5px no-repeat; }
.page .paper-card h3, .page .paper-card .pname { display: block; margin: 0; font-family: var(--font-head); font-weight: 400; font-size: 1.25rem; line-height: 1.2; color: var(--ink); text-decoration: none; }
.page .paper-card p { margin: 2px 0; }
.page .paper-card .meta { font: 400 .9375rem/1.45 var(--font-sans); color: var(--ink-soft); }
.page .paper-card a { text-decoration: none; }
.page .paper-card a:hover h3, .page .paper-card a:hover .pname { text-decoration: underline; }
.page .paper-card img { width: 100%; max-height: 220px; object-fit: cover; margin: 0 0 8px; }
.page details.paper-card summary, .page details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-family: var(--font-head); font-size: 1.2rem; }
.page details { padding: 4px 2px; background: var(--pen-line) left bottom / 100% 5px no-repeat; }
.page details p { margin: 4px 0 10px; }
@media (min-width: 760px) {
  .page .card-list.cols, .page-blog .card-list, .page-find-hub .card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
}
/* actions: small-caps ink text with a glyph, no pills */
.page .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 4px 0 0; }
.page .card-actions a, .page .card-actions button, .page .paper-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: none; color: var(--ink); font: 600 .9375rem var(--font-sans); font-variant: small-caps; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.page .card-actions a:hover, .page .paper-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.page .card-actions .keep-btn svg { display: none; }
.page .card-actions .keep-btn::before { content: "\2727"; color: var(--spirit); font-variant: normal; }
.page .card-actions .keep-btn[aria-pressed="true"]::before { content: "\2726"; }
.page .claim-link { font-size: .8125rem; color: var(--ink-soft); }
.page .badge { font-family: var(--font-head); font-style: italic; color: var(--ink-soft); }
.page .badge::before { content: "\2726 "; color: var(--gold); font-style: normal; }
/* the one primary action stays solid ink (as the prototype's Get featured) */
.page .ink-btn, :where(.page) button[type="submit"]:not(.ink-text):not(.inked-search *):not(.near-panel *), :where(.page) input[type="submit"]:not(.inked-search *):not(.near-panel *) { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper) !important; font: 600 1.0625rem var(--font-sans); text-decoration: none; cursor: pointer; }
.page .ink-btn:hover { background: var(--ink-hover); }
/* forms: inked fields */
:where(.page) form:not(.inked-search *):not(.near-panel *) { margin: 12px 0 18px; }
:where(.page) label:not(.inked-search *):not(.near-panel *) { display: block; margin: 10px 0 4px; font-weight: 600; color: var(--ink-soft); }
:where(.page) input[type="text"]:not(.inked-search *):not(.near-panel *), :where(.page) input[type="email"]:not(.inked-search *):not(.near-panel *), :where(.page) input[type="tel"]:not(.inked-search *):not(.near-panel *), :where(.page) input[type="url"]:not(.inked-search *):not(.near-panel *), :where(.page) input[type="number"]:not(.inked-search *):not(.near-panel *), :where(.page) input:not([type]):not(.inked-search *):not(.near-panel *), :where(.page) select:not(.inked-search *):not(.near-panel *), :where(.page) textarea:not(.inked-search *):not(.near-panel *) {
  width: 100%; max-width: 520px; min-height: 46px; padding: 8px 12px; border: 1.5px solid rgba(44, 68, 41, .55); border-radius: 12px; background: var(--paper-light); color: var(--ink); font: 500 1.0625rem var(--font-sans);
}
:where(.page) textarea:not(.inked-search *):not(.near-panel *) { min-height: 120px; }
:where(.page) input[type="checkbox"]:not(.inked-search *):not(.near-panel *), :where(.page) input[type="radio"]:not(.inked-search *):not(.near-panel *) { width: 20px; height: 20px; accent-color: var(--ink); }
:where(.page) fieldset { border: 1.5px solid var(--ink-faint); border-radius: 12px; padding: 10px 14px; }
/* the city map and the search card on Find Near You */
.page .city-map { margin: 14px 0 18px; }
.page-find .inked-search { margin: 6px 0 18px; }
.page-find .find-results { margin-top: 8px; padding-top: 22px; }
/* blog posts: a reading column, a drop cap, the hero image as a paper plate */
.is-post .page-in { max-width: 680px; }
.is-post .page p, .is-post .page li { font-size: 1.125rem; line-height: 1.75; }
.page .dropcap::first-letter { float: left; font-family: var(--font-head); font-size: 3.6em; line-height: .82; padding: .08em .1em 0 0; color: var(--word); }
.page .hero-img { display: block; width: 100%; padding: 8px; background: var(--paper-card); border: 1px solid var(--ink-faint); box-shadow: 0 10px 26px -14px rgba(70,52,20,0.45); transform: rotate(-.4deg); margin: 10px 0 18px; }
.page-blog .card-list .paper-card img { aspect-ratio: 16 / 10; }
@media (min-width: 900px) { .page { padding-top: 26px; } }
@media print { .atlas-head, .atlas-foot { display: none !important; } }
:where(.page) button:disabled:not(.inked-search *):not(.near-panel *), :where(.page) button[disabled]:not(.inked-search *):not(.near-panel *) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 1rem var(--font-sans); opacity: .45; cursor: not-allowed; }
.page script { display: none !important; }
/* Your Atlas: the kept places as gazetteer entries */
.ya .place-cards { list-style: none; margin: 0; padding: 0; }
.ya .place-card { padding: 10px 2px; background: var(--pen-line) left bottom / 100% 5px no-repeat; }
.ya .place-card h3 { margin: 0; font: 400 1.1875rem/1.25 var(--font-head); }
.ya .pc-n { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: var(--spirit); color: var(--paper); font: 700 .8125rem var(--font-sans); vertical-align: 2px; }
.ya .pc-meta { margin: 2px 0 0; font-size: .9375rem; color: var(--ink-soft); }
.ya .pc-actions { display: flex; flex-wrap: wrap; gap: 0 14px; }
.ya .pc-actions a, .ya .pc-actions button { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: none; padding: 0; color: var(--ink); font: 500 .9375rem var(--font-sans); text-decoration: none; cursor: pointer; }
.ya .keep-btn svg { width: 18px; height: 18px; margin-right: 4px; }
.ya-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 10px 0 16px; }

/* tap targets (44px) for links that stand alone */
:where(.page) p > a:only-child, :where(.page) li > a:only-child, .page .claim-link, .page .card-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.page .crumbs a { min-width: 44px; justify-content: center; }
.page .card-actions a { min-width: 44px; }
.atlas-brand { min-height: 44px; }
/* blog post tags: one quiet line */
.page .tags .tag + .tag::before { content: " \00B7 "; }
/* the one solid button also when it sits in a row of text actions */
.page .card-actions .ink-btn { padding: 0 22px; border-radius: 999px; background: var(--ink); font: 600 1.0625rem var(--font-sans); font-variant: normal; letter-spacing: 0; ;color:var(--paper)}
.page .card-actions .ink-btn:hover { background: var(--ink-hover); text-decoration: none; }
/* a picture that is a link fills its link (the tap area is the picture) */
:where(.page) a:has(> img:only-child) { display: block; }
/* city pages: the guide links as a row of text links */
.page [data-seo-conditions] a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 18px; }

/* entries on city, condition and hub pages: the results panel's entries (js/atlas.js gazetteer) */
.page .gz-list { gap: 0; }
.page .gz-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 10px 2px 8px; background: var(--pen-line) left bottom / 100% 5px no-repeat; list-style: none; }
.page .gz-row > .np-seal, .page article.gz-row > .np-seal { grid-column: 1; grid-row: 1 / span 8; }
.page article.gz-row > :not(.np-seal) { grid-column: 2; }
.page article.gz-row { padding: 10px 2px 8px; }
.page .gz-row h3 { margin: 0; font: 400 1.1875rem/1.25 var(--font-head); }
.page .gz-row .np-meta { margin: 2px 0 0; font: 400 .9375rem/1.45 var(--font-sans); color: var(--ink-soft); }
.page .gz-row p:not(.np-meta) { margin: 4px 0 0; font-size: .9375rem; line-height: 1.5; }
.page li.gz-row > a.paper-card { display: block; padding: 0; background: none; text-decoration: none; }
.page li.gz-row .pname { font: 400 1.1875rem/1.25 var(--font-head); color: var(--ink); }
.page li.gz-row .meta { display: block; margin-top: 2px; }
.page .gz-row .card-actions { gap: 0 14px; margin-top: 2px; }
.page .gz-row .card-actions a, .page .gz-row .card-actions button { font: 500 .9375rem var(--font-sans); font-variant: normal; letter-spacing: 0; }
.page .gz-row .card-actions a[href^="tel:"]::before { content: "\260F"; margin-right: 4px; color: var(--ink-soft); }
.page .gz-row .card-actions a[href*="google.com/maps"]::before { content: "\2316"; margin-right: 4px; color: var(--ink-soft); }
.page .gz-row .card-actions .paper-btn::before { content: "\2767"; margin-right: 4px; color: var(--ink-soft); }
.page .gz-row .card-actions .claim-link { font-size: .8125rem; color: var(--ink-soft); text-decoration: underline; }
.page .gz-list + .np-more { margin: 10px 0 18px; text-align: center; }
/* the street map beside the first list (desktop), above it on a phone */
.page .gz-wrap { display: grid; gap: 18px; }
.page .gz-wrap .city-map { margin: 0; }
.page #cityMap { height: 300px; border-radius: 12px; overflow: hidden; }
.page #cityMap .np-realmap { height: 100%; }
.page .gz-wrap .city-map p { font-size:1rem; }
@media (min-width: 900px) {
  .page .gz-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .page .gz-wrap .city-map { position: sticky; top: 14px; order: 2; }
  .page #cityMap { height: min(70vh, 560px); }
}
@media (max-width: 899px) { .page .gz-wrap .city-map { order: -1; } }
/* care guides: providers near you under each approach, as small entries */
.page .near-slot.on { display: grid; gap: 0; margin-top: 8px; }
.page .near-slot strong { font: 600 .875rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.page .near-slot a { display: block; padding: 8px 0; background: var(--pen-line) left bottom / 100% 4px no-repeat; font: 400 1.125rem/1.3 var(--font-head); color: var(--ink); text-decoration: none; }
.page .near-slot a small { display: block; font: 400 .875rem var(--font-sans); color: var(--ink-soft); }
/* reading width: running text stays a comfortable line length on wide pages */
:where(.page) p:not(.gz-row p):not(.np-meta) { max-width: 72ch; }
/* short pages: the footer sits at the bottom of the window, never above empty paper */
body.atlas-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.atlas-page > main { flex: 1 0 auto; }
body.atlas-page > .atlas-foot { flex: none; }
/* a bold label followed by its value: a space between, or the label on its own line in notes */
:where(.page) strong + a, :where(.page) a > strong:first-child { margin-right: .35em; }
.page .paper-card .meta > strong:first-child { display: block; color: var(--ink); }
/* a form's submit button: its own line under the fields, left-aligned (phone and desktop alike) */
:where(.page) form:not(.inked-search):not(.np-near) button[type="submit"]:not(.inked-search *):not(.near-panel *) { display: flex; width: fit-content; margin: 16px 0 0; }
