/* PHN Pages: the shared look of PHN's content pages. The standard is IT/website/STYLES.md.
   House style: black on white, grays for lines, Public Sans (the theme's), IBM Plex Mono for small labels,
   the red once per page. Every rule sits under .phn-page, so nothing here reaches a page not built to it. */

.phn-page { color: #333132; }
#main:has(.phn-page) { padding-top: 0 !important; }

/* ---------- The top: intro and particulars beside the photo (Chapters is the reference) ---------- */

.phn-page .phn-lede { font-size: 1.15em; margin: 0 0 0.8em; }
.phn-page .phn-top p { margin: 0 0 0.8em; }
.phn-page .phn-top p:last-child { margin-bottom: 0; }
.phn-page .phn-top .phn-action { margin: 1.1em 0; }
.phn-page.phn-top-solo .phn-top { max-width: 42rem; }

.phn-page .phn-photo { margin: 0; }
.phn-page .phn-photo-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.phn-page .phn-photo figcaption { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.75em; margin-top: 0.5em; }
.phn-page .phn-figure img { display: block; width: 100%; height: auto; }
.phn-page .phn-seals { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 28rem; }

/* "On this page": full width under the top, between two gray rules. */
.phn-page .phn-jump { font-size: 0.95em; border-top: 1px solid #a6a6a6; border-bottom: 1px solid #a6a6a6; padding: 0.6em 0; margin: 0 0 20px; }
.phn-page > p.phn-jump { max-width: none; }

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

.phn-page { max-width: 60rem; }
.phn-page h2 { scroll-margin-top: 140px; margin: 1.6em 0 0.5em; }
/* A box's or card's own heading; section H3s keep the theme's size. */
.phn-page .phn-box h3, .phn-page .phn-card h3 { margin: 0 0 0.3em; font-size: 1.1em; }
.phn-page [id] { scroll-margin-top: 140px; }
.phn-page > p, .phn-page > ul, .phn-page > ol, .phn-page > blockquote.phn-quote { max-width: 42rem; }
.phn-page .phn-note { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8em; }

/* A button: a 2px black outline that fills black on hover. */
.phn-page .phn-button { display: inline-block; border: 2px solid #333132; padding: 0.45em 1.1em; font-weight: 700; text-decoration: none; color: #333132; border-radius: 0; }
.phn-page .phn-button:hover { background: #333132; color: #fff; }

/* A box: gray rule; .phn-box-accent adds the page's red as a top rule (once a page). */
.phn-page .phn-box { border: 1px solid #a6a6a6; padding: 1.1em 1.3em; margin: 1.2em 0 0.5em; max-width: 42rem; }
.phn-page .phn-box-accent { border-top: 3px solid #F15646; }
.phn-page .phn-box p { margin: 0 0 0.6em; }
.phn-page .phn-box p:last-child { margin: 0; }

/* Cards: equal boxes in a row of three. */
.phn-page .phn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0.5em 0 1em; }
.phn-page .phn-card { border: 1px solid #a6a6a6; padding: 1.1em 1.2em; display: flex; flex-direction: column; }
.phn-page .phn-card p { margin: 0 0 0.8em; font-size: 0.95em; }
.phn-page .phn-card .phn-button { margin-top: auto; align-self: flex-start; }

/* Quotes (classed, so the theme's own blockquote spacing doesn't win). */
.phn-page blockquote.phn-quote { border-left: 3px solid #a6a6a6; margin: 1em 0; padding: 0.2em 0 0.2em 1em; }
.phn-page blockquote.phn-quote p { margin: 0 0 0.3em; }
.phn-page .phn-who { font-size: 0.9em; }

/* A list that opens and closes (a year's talks, a question's answer). */
.phn-page details.phn-more { border-top: 1px solid #a6a6a6; border-bottom: 1px solid #a6a6a6; padding: 0.5em 0; margin: 0 0 1em; max-width: 42rem; }
.phn-page details.phn-more summary { cursor: pointer; font-weight: 700; }
.phn-page details.phn-more > :not(summary) { margin-top: 0.5em; }

/* ---------- Tables ---------- */

.phn-page table.phn-table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 0.95em; }
.phn-page .phn-table th { text-align: left; font-weight: 700; border-bottom: 2px solid #333132; padding: 0.5em 0.75em 0.5em 0; }
.phn-page .phn-table td { vertical-align: top; border-bottom: 1px solid #a6a6a6; padding: 0.6em 0.75em 0.6em 0; }
.phn-page .phn-table td.phn-label { font-weight: 700; width: 24%; }
.phn-page table.phn-table-narrow { max-width: 48rem; }

/* ---------- Reference tables (the policy and incentives pages) ---------- */

/* Three columns (where / program / what it does): the label ends where the intro's column would. */
.phn-page .phn-table td.phn-prog { width: 32%; }
.phn-page .phn-table:has(td.phn-prog) td.phn-label { width: 18%; }
/* A grid: four or more columns, every cell labeled on a phone. */
.phn-page table.phn-grid td { width: auto; }
.phn-page table.phn-grid td.phn-label { width: 19%; }
/* A table's caption line, group rows, lists and paragraphs inside cells (the reports). */
.phn-page p.phn-tcap { font-weight: 700; margin: 1.5em 0 0.4em; max-width: none; }
.phn-page tr.phn-group th { font-style: italic; border-bottom: 1px solid #a6a6a6; padding-top: 1em; }
.phn-page .phn-table td ul { margin: 0.3em 0 0 1.1em; padding: 0; }
.phn-page .phn-table td p { margin: 0; }

/* ---------- Reading pages (the full-text reports) ---------- */

.phn-page h3[id] { scroll-margin-top: 140px; margin: 1.4em 0 0.4em; }
.phn-page h4 { margin: 1.2em 0 0.4em; }
.phn-page a { overflow-wrap: anywhere; }
.phn-page .phn-top .phn-note { margin: 0 0 0.6em; }
/* A pull quote: emphasis by rule, the red as the page's one accent. The theme fills and italicizes blockquotes. */
.phn-page blockquote.phn-pull { margin: 1.2em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 3px solid #F15646; max-width: 46rem; background: none; font-style: normal; }
.phn-page blockquote.phn-pull p { font-size: 1.35em; line-height: 1.35; margin: 0 0 0.4em; font-style: normal; color: #333132; }
.phn-page blockquote.phn-pull p.phn-cite { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8em; margin: 0; }
/* A quotation inside the text. */
.phn-page blockquote.phn-bq { background: none; border-left: 2px solid #a6a6a6; margin: 1em 0; padding: 0 0 0 1em; max-width: 40rem; }
.phn-page blockquote.phn-bq p { font-style: italic; color: #333132; font-size: 1em; margin: 0; }
.phn-page figure.phn-fig { margin: 1.5em 0; max-width: 48rem; }
.phn-page figure.phn-fig img { display: block; width: 100%; height: auto; }
.phn-page figcaption, .phn-page p.phn-caption { font-size: 0.85em; margin-top: 0.5em; max-width: 42rem; }
.phn-page ol.phn-notes, .phn-page ul.phn-refs { font-size: 0.85em; overflow-wrap: anywhere; }
.phn-page ul.phn-plain { list-style: none; margin-left: 0; padding-left: 0; }
.phn-page sup a { text-decoration: none; }
.phn-page .phn-closing { margin-top: 1.6em; }
/* A report's cover beside its intro: as published, never cropped. */
.phn-page .phn-cover img { display: block; width: 100%; max-width: 20rem; height: auto; border: 1px solid #e6e6e6; }

/* ---------- Lists of reports and books (Reports, Library, Policy, Advocacy) ---------- */

/* Read online / Download PDF: outlined, never filled. */
.phn-page .phn-links { display: block; margin-top: 0.3em; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8em; }
.phn-page .phn-links a { display: inline-block; border: 1px solid #333132; padding: 0.1em 0.6em; margin: 0.2em 1em 0 0; text-decoration: none; color: #333132; }
.phn-page .phn-links a:hover { text-decoration: underline; }
.phn-page .phn-lib-line { margin: 0 0 0.8em; }
.phn-page .phn-lib-item { display: grid; grid-template-columns: 110px 1fr; gap: 1.25em; border-top: 1px solid #a6a6a6; padding: 1.1em 0; }
.phn-page .phn-lib-shelf .phn-lib-item:last-child { border-bottom: 1px solid #a6a6a6; }
.phn-page .phn-lib-item.no-cover { grid-template-columns: 1fr; }
.phn-page .phn-lib-cover img { display: block; width: 110px; height: auto; border: 1px solid #e6e6e6; }
.phn-page .phn-lib-kind { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8em; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 0.2em; }
.phn-page h3.phn-lib-title { font-size: 1.15em; line-height: 1.3; margin: 0; color: #333132; }
.phn-page .phn-lib-sub { display: block; font-weight: 400; }
.phn-page .phn-lib-by { margin: 0.25em 0 0.5em; }
.phn-page .phn-lib-note { margin: 0; max-width: 46rem; }
.phn-page .phn-lib-item p.phn-links { margin: 0.4em 0 0; }

/* ---------- Project cards (Case Studies, Design Awards) ---------- */

.phn-page h2 .phn-cs-iecc { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.5em; font-weight: 400; letter-spacing: 0; margin-top: 0.35em; }
.phn-page .phn-cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.75rem; margin: 0 0 1em; }
.phn-page .phn-cs-card { display: flex; flex-direction: column; }
.phn-page .phn-cs-card p.phn-cs-get { margin-top: auto; padding-top: 0.3em; }
.phn-page .phn-cs-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin: 0 0 0.6em; }
.phn-page .phn-cs-card h3, .phn-page .phn-cs-card h4 { margin: 0 0 0.1em; font-size: 1.15em; font-family: "Public Sans", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: normal; text-transform: none; }
.phn-page .phn-cs-card p { margin: 0 0 0.5em; }
.phn-page .phn-cs-place, .phn-page .phn-cs-arch { font-size: 0.9em; }
.phn-page .phn-cs-card p.phn-cs-place { margin: 0; }
.phn-page .phn-cs-btn { display: inline-block; border: 1px solid #333132; padding: 0.35em 0.8em; margin: 0 0.4em 0.4em 0; font-size: 0.9em; text-decoration: none; }

/* ---------- Events (Conferences, Symposiums, Design Awards) ---------- */

.phn-page .phn-facts { font-weight: 700; }

/* ---------- FAQ ---------- */

.phn-page h3.phn-faq-q { scroll-margin-top: 140px; margin: 1.4em 0 0.4em; font-size: 1.15em; line-height: 1.3; }
.phn-page .phn-faq-a p { margin: 0 0 0.7em; max-width: 46rem; }
.phn-page dl.phn-faq-defs { margin: 0; }
.phn-page dl.phn-faq-defs dt { font-weight: 700; margin: 1.1em 0 0.2em; border-top: 1px solid #a6a6a6; padding-top: 0.9em; }
.phn-page dl.phn-faq-defs dt .phn-faq-also { font-weight: 400; }
.phn-page dl.phn-faq-defs dd { margin: 0; max-width: 46rem; }

/* ---------- Emu Passive's CPHT courses ([phn_emu_courses]) ---------- */

.phn-page .phn-emu-when { font-weight: 700; margin-bottom: 0.2em !important; }
.phn-page .phn-emu-price { font-size: 1.4em !important; font-weight: 700; margin: 0.2em 0 !important; }
.phn-page .phn-emu-format, .phn-page .phn-emu-deadline { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8em !important; }
.phn-page h3.phn-emu-head { margin: 1.6em 0 0.3em; font-size: 1.15em; }
.phn-page .phn-emu-waits .phn-card { padding: 0.9em 1.1em; }
.phn-page .phn-emu-waits .phn-card h3 { font-size: 1em; margin-bottom: 0.6em; }

/* ---------- MemberPress price boxes ([mepr-group-price-boxes], "clean" theme) in the house style ----------
   The checkout path stays MemberPress's; only the look is ours. "Most popular" is the page's red. */
.phn-page .mepr-price-menu.fixed{text-align:left!important;margin:0.5em 0 1.5em;}
.phn-page .mepr-price-menu.fixed .mepr-price-boxes{display:grid!important;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:48rem;margin:0!important;}
.phn-page .mepr-price-menu.fixed .mepr-price-boxes .mepr-price-box{display:flex;flex-direction:column;width:auto!important;margin:0!important;padding:1.1em 1.2em!important;border:1px solid #a6a6a6!important;background:#fff!important;text-align:left;}
.phn-page .mepr-price-menu.fixed .mepr-price-boxes .mepr-price-box.highlighted{border:2px solid #333132!important;}
.phn-page .mepr-price-menu.fixed .mepr-price-box .mepr-most-popular{order:-1;background:none!important;color:#F15646!important;border:0!important;margin:0 0 0.4em!important;padding:0!important;width:auto!important;font-family:"IBM Plex Mono",monospace;font-size:0.75em!important;letter-spacing:0.04em;text-transform:uppercase;font-weight:400!important;}
.phn-page .mepr-price-menu.fixed .mepr-price-box:not(.highlighted) .mepr-most-popular{display:none;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-head{margin:0!important;padding:0!important;text-align:left!important;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-title{font-family:inherit!important;font-size:1.1em!important;font-weight:700!important;color:#333132;margin:0 0 0.3em!important;padding:0!important;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-price{font-family:inherit!important;font-size:1.8em!important;font-weight:700!important;color:#333132;line-height:1.1;margin:0 0 0.3em!important;padding:0!important;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-price::after{content:" a year";font-size:0.5em;font-weight:400;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-heading{font-family:inherit!important;font-size:0.95em!important;border:0!important;background:none!important;margin:0 0 0.8em!important;padding:0!important;}
.phn-page .mepr-price-menu.fixed #mepr-price-box-22447 .mepr-price-box-title{margin-bottom:0.3em!important;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-benefits{display:none;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-foot{margin:auto 0 0!important;padding:0!important;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-footer:empty{display:none;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-button{margin:0!important;padding:0!important;text-align:left!important;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-button a{display:inline-block;border:2px solid #333132;padding:0.45em 1.1em;font-weight:700;text-decoration:none;color:#333132!important;background:none!important;font-family:inherit!important;font-size:1em!important;text-transform:none!important;letter-spacing:0!important;margin:0!important;width:auto!important;border-radius:0!important;}
.phn-page .mepr-price-menu.fixed .mepr-price-box-button a:hover{background:#333132!important;color:#fff!important;}
@media (max-width: 720px) { .phn-page .mepr-price-menu.fixed .mepr-price-boxes { grid-template-columns: 1fr; } }

/* A MemberPress group page (Membership) uses the blog-post template: hide its date and share line
   (the share line carries Facebook, which PHN doesn't link). */
.single-memberpressgroup .fusion-meta-info, .single-memberpressgroup .fusion-sharing-box { display: none !important; }


/* ---------- The learning-paths map (Training) ----------
   Moved here from the Training paste (batch 3, 2026-10-23). Two tracks by three steps, opening into continuing
   education; the certification step carries the page's red. */

.phn-page .phn-map { color:#333132;margin:0 0 1em; }
.phn-page .phn-map-grid { display:grid;grid-template-columns:9rem 2rem 1fr 2rem 1fr 2rem 1fr;gap:0.75rem 0;align-items:stretch; }
.phn-page .phn-map-step { font-family:"IBM Plex Mono",monospace;font-size:0.8em;letter-spacing:0.04em;text-transform:uppercase;padding:0 0 0.35em;border-bottom:1px solid #a6a6a6;align-self:end; }
.phn-page .phn-map-step.phn-map-cert { border-bottom:3px solid #F15646; }
.phn-page .phn-map-track { padding:1em 1em 1em 0; }
.phn-page .phn-map-track b { display:block;font-size:1.15em; }
.phn-page .phn-map-track span { font-size:0.9em; }
.phn-page .phn-map-box { border:1px solid #a6a6a6;padding:1em 1.1em; }
.phn-page .phn-map-box.phn-map-cert { border:2px solid #333132; }
.phn-page .phn-map-box h3 { font-size:1.05em;margin:0 0 0.35em;line-height:1.3; }
.phn-page .phn-map-box p { margin:0;font-size:0.92em; }
.phn-page .phn-map-arrow { display:flex;align-items:center;justify-content:center;font-size:1.4em;color:#4d4d4d; }
.phn-page .phn-map-grid>.phn-map-arrow { align-items:flex-start;padding-top:0.55rem; }
.phn-page .phn-map-down { grid-column:7;text-align:center;font-size:1.4em;color:#4d4d4d;line-height:1; }
.phn-page .phn-map-ce { border:2px solid #333132;padding:1.25em 1.4em;margin:0.5em 0 0; }
.phn-page .phn-map-ce>h3 { margin:0 0 0.2em; }
.phn-page .phn-map-ce>p { margin:0 0 1em; }
.phn-page .phn-map-flow { display:grid;grid-template-columns:1.2fr 2rem 1.2fr 2rem 1fr;gap:0; }
.phn-page .phn-map-flow>.phn-map-arrow { align-items:flex-start;padding-top:2.6rem; }
.phn-page .phn-map-credit { font-weight:700;margin:0 0 0.4em !important; }
.phn-page .phn-map-col h4 { font-family:"IBM Plex Mono",monospace;font-size:0.78em;letter-spacing:0.04em;text-transform:uppercase;font-weight:400;margin:0 0 0.5em;padding:0 0 0.35em;border-bottom:1px solid #a6a6a6; }
.phn-page .phn-map-col ul { list-style:none;margin:0;padding:0;font-size:0.92em; }
.phn-page .phn-map-col li { margin:0 0 0.25em; }
.phn-page .phn-map-col p { font-size:0.92em;margin:0 0 0.5em; }
.phn-page .phn-map-loop { font-size:0.92em;border-top:1px solid #a6a6a6;margin:1em 0 0;padding:0.6em 0 0; }
.phn-page .phn-map-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }

/* ---------- Phone ---------- */

@media (max-width: 900px) {
	.phn-page .phn-cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
	.phn-page .phn-figure { margin-top: 1em; }
}
@media (max-width: 600px) {
	.phn-page .phn-cs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.phn-page .phn-cards { grid-template-columns: 1fr; }
	.phn-page .phn-table thead { display: none; }
	.phn-page .phn-table, .phn-page .phn-table tbody, .phn-page .phn-table tr, .phn-page .phn-table td { display: block; width: auto !important; }
	.phn-page .phn-table tr { border-top: 1px solid #a6a6a6; padding: 0.4em 0; }
	.phn-page .phn-table td { border: 0; padding: 0.15em 0; }
	.phn-page .phn-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; }
	.phn-page .phn-table td[data-label]:empty { display: none; }
	.phn-page .phn-table td.phn-label { padding-top: 0.4em; }
	.phn-page .phn-lib-item { grid-template-columns: 72px 1fr; gap: 1em; }
	.phn-page .phn-lib-cover img { width: 72px; }
}
/* The map, on a phone: one column, the steps written into each box. */
@media (max-width: 800px) {
	.phn-page .phn-map-grid { grid-template-columns:1fr; }
	.phn-page .phn-map-grid .phn-map-step, .phn-page .phn-map-grid .phn-map-blank { display:none; }
	.phn-page .phn-map-track { padding:1.2em 0 0.2em;border-top:1px solid #a6a6a6; }
	.phn-page .phn-map-arrow { transform:rotate(90deg);height:1.4em; }
	.phn-page .phn-map-grid>.phn-map-arrow, .phn-page .phn-map-flow>.phn-map-arrow { padding-top:0;align-items:center; }
	.phn-page .phn-map-down { grid-column:1; }
	.phn-page .phn-map-flow { grid-template-columns:1fr; }
	.phn-page .phn-map-flow .phn-map-arrow { margin:0.5em 0; }
	.phn-page .phn-map-cards { grid-template-columns:1fr; }
	.phn-page .phn-map-box[data-step]::before { content:attr(data-step);display:block;font-family:"IBM Plex Mono",monospace;font-size:0.75em;letter-spacing:0.04em;text-transform:uppercase;margin:0 0 0.3em; }
}