/* Portfolio detail page island. */

body.hong-main-v2--media-detail {
	--tpv2-background: #f6f4ef;
	--tpv2-surface: #fbfaf7;
	--tpv2-surface-alt: #f1eee8;
	--tpv2-border: #d9d4ca;
	--tpv2-ink: #111111;
	--tpv2-heading: #0f1419;
	--tpv2-body: #1b1f24;
	--tpv2-muted: #1f2933;
	--tpv2-red: #d81f26;
	background: var(--tpv2-background);
	font-family: var(--hong-sans);
}

html body.hong-main-v2--media-detail,
body.hong-main-v2--media-detail .site-container {
	background-color: var(--tpv2-background) !important;
}

body.hong-main-v2--media-detail .entry,
body.hong-main-v2--media-detail .entry-content {
	background: transparent;
}

body.hong-main-v2--media-detail :is(.entry-header .entry-title, .title.entry-title) {
	display: none !important;
}

body.hong-main-v2--media-detail :where(h1, h2, h3, h4) {
	font-family: var(--hong-display);
	letter-spacing: 0;
}

body.hong-main-v2--media-detail :where(h1, h2) {
	font-weight: 600;
}

body.hong-main-v2--media-detail .site-inner,
body.hong-main-v2--media-detail .content-sidebar-wrap,
body.hong-main-v2--media-detail .content {
	inline-size: 100%;
	margin: 0;
	max-inline-size: none;
	padding: 0;
}

body.hong-main-v2--media-detail .breadcrumb {
	display: none;
}

body.hong-main-v2--media-detail .hong-portfolio-v2 {
	background-color: var(--tpv2-background);

	background-position: -1px -1px;

	color: var(--tpv2-body);
	font-family: var(--hong-sans);
	inline-size: 100vw;
	margin: 0 calc(50% - 50vw);
	overflow: hidden;
	padding-block-end: clamp(64px, 8vw, 116px);
}

/* `:not(.hong-cta *)` keeps this reset out of the clinic CTA block (wp_block 16803,
   appended by hong_portfolio_book_v2_cta). That component ships its own vertical
   rhythm in lib/hong-cta.css at a LOWER specificity, so without the exclusion this
   rule flattens every heading and paragraph inside it. */
body.hong-main-v2--media-detail .hong-portfolio-v2 :is(h1, h2, h3, p, dl, dd):not(.hong-cta *) {
	margin-block-start: 0;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__hero,
body.hong-main-v2--media-detail .hong-portfolio-v2__content-band,
body.hong-main-v2--media-detail .hong-portfolio-v2__context,
body.hong-main-v2--media-detail .hong-portfolio-v2__cta,
body.hong-main-v2--media-detail .hong-portfolio-v2__footer {
	inline-size: min(var(--hong-width-landing, 1240px), calc(100% - 48px));
	margin-inline: auto;
}

/* The CTA already carries its own max-width (1180px) and vertical margin; the band
   wrapper only supplies the page gutter, so collapse the doubled top margin. */
body.hong-main-v2--media-detail .hong-portfolio-v2__cta > .hong-cta {
	margin-block-start: clamp(32px, 5vw, 64px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__hero {
	padding-block: clamp(32px, 5vw, 72px) clamp(40px, 6vw, 88px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__hero-grid {
	background: var(--tpv2-ink);
	border: 1px solid rgba(15, 20, 25, 0.14);
	display: grid;
	gap: 1px;
	grid-template-columns: minmax(0, 0.67fr) minmax(320px, 0.33fr);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__hero-copy,
body.hong-main-v2--media-detail .hong-portfolio-v2__press-card {
	background: var(--tpv2-surface);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__hero-copy {
	align-content: end;
	background:
		linear-gradient(90deg, rgba(216, 31, 38, 0.14) 0 10px, transparent 10px),
		var(--tpv2-surface);
	min-block-size: clamp(420px, 48vw, 640px);
	padding: clamp(34px, 6vw, 84px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__back,
body.hong-main-v2--media-detail .hong-portfolio-v2__back:visited {
	border: 1px solid rgba(15, 20, 25, 0.18);
	border-radius: 999px;
	color: var(--tpv2-ink);
	display: inline-flex;
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	margin-block-end: clamp(24px, 4vw, 42px);
	padding: 9px 13px;
	text-decoration: none;
	text-transform: uppercase;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__back:hover,
body.hong-main-v2--media-detail .hong-portfolio-v2__back:focus-visible {
	background: var(--tpv2-ink);
	color: #fff;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__eyebrow,
body.hong-main-v2--media-detail .hong-portfolio-v2__story-label {
	color: var(--tpv2-red);
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.35;
	margin-block-end: 16px;
	text-transform: uppercase;
}

body.hong-main-v2--media-detail .hong-portfolio-v2 h1 {
	color: var(--tpv2-heading);
	font-size: clamp(42px, 6vw, 86px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 0.96;
	margin-block-end: clamp(22px, 3vw, 34px);
	max-inline-size: 22ch;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__summary {
	color: var(--tpv2-body);
	font-size: clamp(18px, 1.45vw, 23px);
	line-height: 1.5;
	max-inline-size: 58rem;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: clamp(24px, 4vw, 42px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__chips span {
	background: #fff;
	border: 1px solid rgba(15, 20, 25, 0.12);
	border-radius: 999px;
	color: var(--tpv2-ink);
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	padding: 9px 12px;
	text-transform: uppercase;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__press-card {
	display: grid;
	grid-template-rows: minmax(210px, 0.85fr) auto;
	min-block-size: 100%;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__logo-frame {
	align-items: center;
	background: #fff;
	border-block-end: 1px solid rgba(15, 20, 25, 0.12);
	display: flex;
	justify-content: center;
	min-block-size: 230px;
	padding: clamp(26px, 4vw, 44px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__logo-frame img {
	block-size: auto;
	filter: grayscale(1);
	max-block-size: 118px;
	max-inline-size: min(78%, 270px);
	object-fit: contain;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__logo-frame--book {
	background: #f3f0ea;
	min-block-size: 330px;
	padding: clamp(18px, 3vw, 30px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__logo-frame--book img {
	filter: none;
	max-block-size: 290px;
	max-inline-size: min(82%, 230px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__logo-frame span {
	color: var(--tpv2-ink);
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 800;
	line-height: 1;
	text-align: center;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__facts {
	display: grid;
	margin: 0;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__facts div {
	border-block-end: 1px solid rgba(15, 20, 25, 0.1);
	display: grid;
	gap: 8px;
	padding: 22px 24px;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__facts div:last-child {
	border-block-end: 0;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__facts dt {
	color: var(--tpv2-muted);
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__facts dd {
	color: var(--tpv2-ink);
	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 700;
	line-height: 1.15;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__content-band {
	margin-block-end: clamp(42px, 6vw, 84px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__content-grid {
	align-items: start;
	display: grid;
	gap: clamp(20px, 3vw, 42px);
	grid-template-columns: minmax(260px, 0.28fr) minmax(0, 0.72fr);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__content-grid--no-rail {
	grid-template-columns: minmax(0, 1fr);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story-wrap,
body.hong-main-v2--media-detail .hong-portfolio-v2__context article,
body.hong-main-v2--media-detail .hong-portfolio-v2__footer {
	border: 1px solid rgba(15, 20, 25, 0.12);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story-wrap {
	background: #fff;
	padding: clamp(24px, 4vw, 48px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story {
	color: var(--tpv2-body);
	font-size: clamp(18px, 1.35vw, 21px);
	line-height: 1.72;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story > * {
	inline-size: min(100%, 780px);
	margin-inline: auto;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story :is(.wp-block-embed, .wp-block-image, figure, iframe, img) {
	inline-size: min(100%, 980px);
	max-inline-size: 100%;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story .wp-block-embed,
body.hong-main-v2--media-detail .hong-portfolio-v2__story .wp-block-image {
	margin-block: clamp(28px, 5vw, 58px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
	background: #111;
	inline-size: 100%;
	overflow: hidden;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story iframe {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story img {
	block-size: auto;
	display: block;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story .wp-block-spacer {
	block-size: clamp(28px, 4vw, 52px) !important;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__story h2 {
	color: var(--tpv2-heading);
	font-size: clamp(30px, 3vw, 44px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.08;
	margin-block: clamp(34px, 5vw, 60px) 18px;
}

body.hong-main-v2--media-detail .hong-portfolio-story-section,
body.hong-main-v2--media-detail .hong-portfolio-story-wide,
body.hong-main-v2--media-detail .hong-portfolio-story-note,
body.hong-main-v2--media-detail .hong-portfolio-story-steps,
body.hong-main-v2--media-detail .hong-portfolio-story-faqs-shell {
	background: #f8f6f1;
	border: 1px solid rgba(15, 20, 25, 0.1);
	margin-block: clamp(28px, 5vw, 58px);
	padding: clamp(20px, 4vw, 42px);
}

body.hong-main-v2--media-detail .hong-portfolio-story-container,
body.hong-main-v2--media-detail .hong-portfolio-story-note__inner,
body.hong-main-v2--media-detail .hong-portfolio-story-note__copy {
	inline-size: min(100%, 920px);
	margin-inline: auto;
}

body.hong-main-v2--media-detail .hong-portfolio-story-heading {
	color: var(--tpv2-heading);
	font-size: clamp(26px, 3vw, 42px);
	font-weight: 700;
	line-height: 1.08;
	margin: 0 0 22px;
}

body.hong-main-v2--media-detail .hong-portfolio-story-dot {
	background: var(--tpv2-red);
	block-size: 4px;
	inline-size: 64px;
	margin-block-end: 24px;
}

body.hong-main-v2--media-detail .hong-portfolio-story-media,
body.hong-main-v2--media-detail .hong-portfolio-story-copy,
body.hong-main-v2--media-detail .hong-portfolio-story-copy-inner {
	inline-size: min(100%, 920px);
	margin-inline: auto;
}

body.hong-main-v2--media-detail .hong-portfolio-story-image__img,
body.hong-main-v2--media-detail .hong-portfolio-story-list__media img {
	block-size: auto;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

body.hong-main-v2--media-detail .hong-portfolio-story-list {
	display: grid;
	gap: clamp(18px, 4vw, 36px);
	grid-template-columns: minmax(240px, 0.38fr) minmax(0, 0.62fr);
}

body.hong-main-v2--media-detail .hong-portfolio-story-list__items {
	display: grid;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.hong-main-v2--media-detail .hong-portfolio-story-list__item {
	background: #fff;
	border: 1px solid rgba(15, 20, 25, 0.1);
	padding: 18px;
}

body.hong-main-v2--media-detail .hong-portfolio-story-list__title {
	color: var(--tpv2-heading);
	font-size: clamp(18px, 1.5vw, 24px);
	line-height: 1.18;
	margin: 0 0 8px;
}

body.hong-main-v2--media-detail .hong-portfolio-story-list__number {
	color: var(--tpv2-red);
	font-family: var(--hong-mono);
	font-size: 0.82em;
	margin-inline-end: 8px;
}

body.hong-main-v2--media-detail .hong-portfolio-story-list__description {
	color: var(--tpv2-muted);
	font-size: 16px;
	line-height: 1.56;
}

body.hong-main-v2--media-detail .hong-portfolio-story-steps__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.hong-main-v2--media-detail .hong-portfolio-story-step {
	background: #fff;
	border: 1px solid rgba(15, 20, 25, 0.1);
	padding: 22px;
}

body.hong-main-v2--media-detail .hong-portfolio-story-step__title,
body.hong-main-v2--media-detail .hong-portfolio-story-step__number {
	color: var(--tpv2-red);
	font-family: var(--hong-mono);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.hong-main-v2--media-detail .hong-portfolio-story-step__line {
	border-block-start: 1px solid rgba(15, 20, 25, 0.14);
	margin-block: 16px;
	padding-block-start: 14px;
}

body.hong-main-v2--media-detail .hong-portfolio-story-step__body {
	color: var(--tpv2-muted);
	font-size: 16px;
	line-height: 1.58;
}

body.hong-main-v2--media-detail .hong-portfolio-story-faqs {
	display: grid;
	gap: 12px;
}

body.hong-main-v2--media-detail .hong-portfolio-story-faq {
	background: #fff;
	border: 1px solid rgba(15, 20, 25, 0.1);
	padding: 18px;
}

body.hong-main-v2--media-detail .hong-portfolio-story-faq__title {
	background: transparent;
	border: 0;
	color: var(--tpv2-heading);
	display: block;
	font: inherit;
	font-weight: 750;
	padding: 0;
	text-align: left;
}

body.hong-main-v2--media-detail .hong-portfolio-story-faq__body {
	color: var(--tpv2-muted);
	font-size: 16px;
	line-height: 1.62;
	margin-block-start: 10px;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__context {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(3, 1fr);
	margin-block-end: clamp(42px, 6vw, 84px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__context article {
	background: var(--tpv2-surface);
	min-block-size: 260px;
	padding: clamp(24px, 3vw, 36px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__context span {
	color: var(--tpv2-red);
	display: block;
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	margin-block-end: 42px;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__context h2 {
	color: var(--tpv2-heading);
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.05;
	margin-block-end: 16px;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__context p,
body.hong-main-v2--media-detail .hong-portfolio-v2__footer p {
	color: var(--tpv2-muted);
	font-size: 17px;
	line-height: 1.55;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__footer {
	align-items: end;
	background: var(--tpv2-ink);
	color: #fff;
	display: grid;
	gap: clamp(24px, 5vw, 72px);
	grid-template-columns: minmax(0, 0.62fr) auto;
	padding: clamp(30px, 5vw, 60px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__footer h2 {
	color: #fff;
	font-size: clamp(34px, 4vw, 58px);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	margin-block-end: 16px;
}

/* The shared eyebrow rule paints --tpv2-red (#d81f26). That reads fine on the
   light bands, but the footer is --tpv2-ink (#111) — red on near-black is 1.28:1,
   effectively invisible. The footer copy of the eyebrow needs a light tone. */
body.hong-main-v2--media-detail .hong-portfolio-v2__footer .hong-portfolio-v2__eyebrow {
	color: #ff8a84;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__footer p:not(.hong-portfolio-v2__eyebrow) {
	color: rgba(255, 255, 255, 0.72);
	max-inline-size: 62rem;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__footer--actions-only {
	grid-template-columns: minmax(0, 1fr);
	padding-block: clamp(22px, 3vw, 34px);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__footer--actions-only .hong-portfolio-v2__actions {
	justify-content: flex-start;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__button,
body.hong-main-v2--media-detail .hong-portfolio-v2__button:visited {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	justify-content: center;
	line-height: 1;
	min-block-size: 48px;
	padding: 0 18px;
	text-decoration: none;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__button--primary {
	background: #fff;
	color: var(--tpv2-ink);
}

body.hong-main-v2--media-detail .hong-portfolio-v2__button--secondary {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}

body.hong-main-v2--media-detail .hong-portfolio-v2__button:hover,
body.hong-main-v2--media-detail .hong-portfolio-v2__button:focus-visible {
	transform: translateY(-1px);
}

@media (max-width: 980px) {
	body.hong-main-v2--media-detail .hong-portfolio-v2__hero-grid,
	body.hong-main-v2--media-detail .hong-portfolio-v2__content-grid,
	body.hong-main-v2--media-detail .hong-portfolio-v2__context,
	body.hong-main-v2--media-detail .hong-portfolio-v2__footer {
		grid-template-columns: 1fr;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2__hero-copy {
		min-block-size: auto;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2 h1 {
		max-inline-size: 100%;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2__actions {
		justify-content: flex-start;
	}
}

@media (max-width: 760px) {
	body.hong-main-v2--media-detail .hong-portfolio-v2__hero,
	body.hong-main-v2--media-detail .hong-portfolio-v2__content-band,
	body.hong-main-v2--media-detail .hong-portfolio-v2__context,
	body.hong-main-v2--media-detail .hong-portfolio-v2__footer {
		inline-size: min(100% - 28px, var(--hong-width-landing, 1240px));
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2__hero {
		padding-block-start: 18px;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2__hero-copy,
	body.hong-main-v2--media-detail .hong-portfolio-v2__story-wrap,
	body.hong-main-v2--media-detail .hong-portfolio-v2__footer {
		padding: 24px;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2 h1 {
		font-size: clamp(36px, 11vw, 48px);
		line-height: 1.04;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2__summary,
	body.hong-main-v2--media-detail .hong-portfolio-v2__story {
		font-size: 17px;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2__chips span {
		inline-size: 100%;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2__press-card {
		grid-template-rows: auto;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2__logo-frame {
		min-block-size: 160px;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2__context article {
		min-block-size: auto;
	}

	body.hong-main-v2--media-detail .hong-portfolio-v2__button {
		inline-size: 100%;
	}

	body.hong-main-v2--media-detail .hong-portfolio-story-steps__grid {
		grid-template-columns: 1fr;
	}

	body.hong-main-v2--media-detail .hong-portfolio-story-list {
		grid-template-columns: 1fr;
	}
}