/* Inner-page components: page hero, content grids, galleries, story, contact, articles. */

.page-hero {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 10vw;
	align-items: center;
	padding-block: 54px 70px;
}

.page-hero > * {
	min-width: 0;
}

.page-hero h1 {
	font-size: clamp(3.1rem, 5.7vw, 5.4rem);
}

.page-hero p {
	max-width: 470px;
}

.page-hero .portrait {
	height: 540px;
	border-radius: 240px 240px 0 0;
}

.page-hero .portrait img {
	height: 100%;
	border-radius: inherit;
}

.page-hero .overline {
	display: block;
	margin-bottom: 24px;
	color: var(--fg-color-accent);
}

.page-hero .button {
	margin-top: 12px;
}

.treatment-hero .portrait {
	height: 590px;
	border-radius: 0;
}

.content-grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 12vw;
	align-items: start;
}

.content-grid > * {
	min-width: 0;
}

.content-grid > h2 {
	position: sticky;
	top: 140px;
}

.image-break {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr;
	grid-template-rows: minmax(0, 1fr);
	gap: 24px;
	height: 470px;
}

.image-break img {
	height: 100%;
	min-width: 0;
	object-fit: cover;
}

.mini-note {
	margin-top: 24px;
	color: var(--fg-color-muted);
	font-size: 0.9rem;
}

.price-note,
p.fg-prices__note {
	margin-top: 28px;
	color: var(--fg-color-muted);
	font-size: 0.94rem;
}

.fg-prices-slot {
	min-width: 0;
}

.fg-prices-slot:not(:empty) {
	margin-block: 24px;
}

.story-grid {
	display: grid;
	grid-template-columns: 0.6fr 1fr;
	gap: 12vw;
	align-items: start;
}

.story-grid > * {
	min-width: 0;
}

.story-aside {
	position: sticky;
	top: 120px;
}

.story-aside img {
	height: 560px;
}

.story-copy h2 {
	margin-top: 56px;
	font-size: 2.75rem;
}

.story-copy p {
	max-width: 620px;
}

.founder {
	margin-bottom: 48px;
}

.founder h2 {
	margin-top: 0;
}

.founder strong {
	font-size: 1.15rem;
}

.values {
	display: flex;
	flex-direction: column;
	gap: 42px;
	max-width: 800px;
	margin: auto;
}

.value {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.value p {
	margin: 0;
}

.post-list {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 70px;
}

.post-list > * {
	min-width: 0;
}

.post-list a {
	display: block;
	text-decoration: none;
}

.post-list--single {
	grid-template-columns: minmax(0, 1fr);
}

.post-list--single .featured-post {
	max-width: 840px;
}

.post-list--plain {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 0 70px;
}

.post-list img {
	height: 470px;
	margin-bottom: 30px;
}

.post-list h2 {
	font-size: 2.8rem;
	overflow-wrap: anywhere;
}

.post-list .secondary-post {
	margin-bottom: 48px;
}

.secondary-post img {
	height: 230px;
}

.secondary-post h2 {
	font-size: 2rem;
}

.post-meta {
	margin-bottom: 16px;
	color: var(--fg-color-muted);
	font-size: 0.9rem;
}

.article {
	max-width: 760px;
	margin: auto;
	padding-block: 30px 100px;
}

.article h1 {
	font-size: clamp(3rem, 5vw, 4.8rem);
}

.article .article-title {
	margin-top: 32px;
	overflow-wrap: break-word;
}

.article h2 {
	margin-top: 48px;
	font-size: 2.6rem;
}

.article h3 {
	margin-top: 32px;
	font-size: 1.8rem;
}

.article h4 {
	margin: 32px 0 12px;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.4;
}

.article-hero {
	width: 100%;
	height: 350px;
	margin: 36px 0 42px;
	object-position: center 60%;
}

.article p,
.legal p {
	max-width: none;
}

.article ul,
.article ol,
.legal ul,
.legal ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.article li {
	margin-bottom: 16px;
}

.article-body > :first-child {
	margin-top: 0;
}

.post-meta + .article-body {
	margin-top: 36px;
}

.article-book {
	margin-top: 48px;
}

.article figure,
.legal figure {
	margin: 40px 0;
}

.article figure img,
.legal figure img {
	width: auto;
	max-width: 100%;
	max-height: 640px;
}

.article figcaption,
.legal figcaption {
	margin-top: 12px;
	color: var(--fg-color-muted);
	font-size: 0.9rem;
}

.article .alignleft,
.article .alignright,
.article .aligncenter,
.article .alignwide,
.article .alignfull {
	float: none;
	max-width: 100%;
	margin-inline: 0;
}

.article blockquote {
	margin: 48px 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--fg-color-line);
	font-family: var(--fg-font-display);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.article blockquote p {
	margin-bottom: 12px;
}

.article cite {
	display: block;
	color: var(--fg-color-muted);
	font-family: var(--fg-font-body);
	font-size: 0.9rem;
	font-style: normal;
	letter-spacing: 0.005em;
}

.article hr,
.legal hr {
	margin-block: 48px;
	border: 0;
	border-top: 1px solid var(--fg-color-line);
}

.article table,
.legal table {
	width: 100%;
	margin-bottom: 24px;
	border-collapse: collapse;
}

.article th,
.article td,
.legal th,
.legal td {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--fg-color-line);
	text-align: left;
	vertical-align: top;
}

.article pre,
.legal pre {
	max-width: 100%;
	overflow-x: auto;
}

.legal-section {
	padding-block: 24px clamp(64px, 8vw, 110px);
}

.legal {
	max-width: 70ch;
}

.legal h2 {
	margin: 48px 0 16px;
	font-size: clamp(1.75rem, 2.6vw, 2.1rem);
}

.legal h3 {
	margin: 32px 0 12px;
	font-size: 1.4rem;
}

.legal > :first-child {
	margin-top: 0;
}

.legal p {
	margin-bottom: 18px;
}

.legal li {
	margin-bottom: 8px;
}

.page-heading {
	max-width: 1440px;
	padding-block: 34px 16px;
}

.page-heading h1 {
	margin-bottom: 12px;
	font-size: clamp(3rem, 4.5vw, 4rem);
}

.page-heading p {
	max-width: 630px;
	margin-bottom: 0;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8vw;
}

.contact-grid > * {
	min-width: 0;
}

.contact-info {
	grid-column: 1;
	grid-row: 1;
}

.contact-grid .form-shell {
	grid-column: 2;
	grid-row: 1;
}

.address {
	margin-bottom: 30px;
	font-family: var(--fg-font-display);
	font-size: 2.5rem;
	line-height: 1.2;
}

.hours-heading {
	margin: 36px 0 0;
	font-size: 1.5rem;
}

.hours {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 24px;
	max-width: 320px;
	margin-block: 16px 30px;
}

.hours dd {
	margin: 0;
}

.map-placeholder {
	display: flex;
	flex-direction: column;
	justify-content: end;
	min-height: 280px;
	padding: 40px;
	background: var(--fg-color-surface);
	border: 1px solid var(--fg-color-line);
}

.map-placeholder strong {
	font-family: var(--fg-font-display);
	font-size: 2rem;
	font-weight: 400;
}

.map-placeholder p {
	color: var(--fg-color-muted);
}

.pagination {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid var(--fg-color-line);
}

.pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	text-decoration: none;
}

.pagination li > .page-numbers.current {
	background: var(--fg-color-action);
	color: var(--fg-color-action-text);
}

.pagination li > .page-numbers.dots {
	color: var(--fg-color-muted);
}

.pagination a.prev,
.pagination a.next {
	padding-inline: 0;
	font-weight: 500;
	border-bottom: 1px solid var(--fg-color-accent);
	border-radius: 0;
}

.pagination li:has(> .prev) {
	margin-right: auto;
}

.pagination li:has(> .next) {
	margin-left: auto;
}

.empty-state {
	max-width: 560px;
}

.empty-state h2 {
	font-size: clamp(2.25rem, 4vw, 3.2rem);
}

.not-found {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 10vw;
	align-items: center;
	padding-block: clamp(48px, 7vw, 100px) clamp(64px, 9vw, 130px);
}

.not-found > * {
	min-width: 0;
}

.not-found h1 {
	font-size: clamp(3.1rem, 5.7vw, 5.4rem);
}

.not-found p {
	max-width: 470px;
}

.not-found .overline {
	display: block;
	margin-bottom: 24px;
	color: var(--fg-color-accent);
}

.not-found .actions {
	margin-top: 40px;
}

.not-found-arch {
	height: clamp(300px, 34vw, 480px);
	background: var(--fg-color-surface);
	border-radius: 240px 240px 0 0;
}

.booking-area {
	padding-top: 16px;
	padding-bottom: 100px;
}

.booking-shell {
	padding-block: 32px clamp(64px, 9vw, 120px);
}

.shell {
	max-width: 760px;
	padding: clamp(28px, 4vw, 48px);
	background: var(--fg-color-surface);
}

.shell h2 {
	font-size: clamp(2rem, 3.4vw, 2.8rem);
}

.shell > p {
	max-width: 52ch;
}

.shell-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	margin: 32px 0 24px;
	padding-block: 20px;
	border-block: 1px solid var(--fg-color-line);
}

.shell-contact dt {
	color: var(--fg-color-muted);
	font-size: 0.875rem;
}

.shell-contact dd {
	margin: 0;
	font-family: var(--fg-font-display);
	font-size: 1.5rem;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.shell-contact a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.shell .actions {
	gap: 8px 32px;
}

@media (max-width: 1180px) {
	.page-hero {
		gap: 6vw;
	}

	.content-grid {
		gap: 8vw;
	}
}

@media (max-width: 950px) {
	.page-hero h1 {
		font-size: 3.8rem;
	}

	.page-hero .portrait {
		height: 430px;
	}

	.image-break {
		height: 370px;
	}

	.content-grid,
	.story-grid {
		gap: 6vw;
	}
}

@media (max-width: 700px) {
	.page-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 42px;
		padding-block: 38px 48px;
	}

	.page-hero h1 {
		font-size: 3.5rem;
	}

	.page-hero .overline {
		margin-bottom: 20px;
	}

	.page-hero .portrait {
		height: 380px;
		margin-left: 52px;
	}

	.page-hero p {
		margin-bottom: 24px;
	}

	.content-grid,
	.story-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.content-grid > h2,
	.story-aside {
		position: static;
	}

	.content-grid > h2 {
		margin-bottom: 0;
		font-size: clamp(2.1rem, 10vw, 2.7rem);
	}

	.image-break {
		grid-template-columns: 1.1fr 1fr;
		gap: 16px;
		height: 320px;
	}

	.image-break img:last-child {
		display: none;
	}

	.story-aside img {
		height: 380px;
		object-position: center 70%;
	}

	.story-copy h2 {
		font-size: 2.4rem;
	}

	.founder {
		margin-bottom: 30px;
	}

	.value {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.post-list {
		grid-template-columns: 1fr;
		gap: 46px;
	}

	.post-list img {
		height: 340px;
	}

	.post-list h2 {
		font-size: 2.35rem;
	}

	.post-list .secondary-post {
		margin-bottom: 45px;
	}

	.secondary-post img {
		height: 240px;
	}

	.not-found {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-block: 38px 64px;
	}

	.not-found h1 {
		font-size: 3.2rem;
	}

	.not-found-arch {
		display: none;
	}

	.not-found .actions {
		margin-top: 32px;
	}

	.booking-area {
		padding-inline: 16px;
		padding-bottom: 64px;
	}

	.pagination {
		margin-top: 48px;
	}

	.contact-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 50px;
	}

	.contact-info,
	.contact-grid .form-shell {
		grid-column: auto;
		grid-row: auto;
	}

	.map-placeholder {
		padding: 28px;
	}

	.article {
		padding-bottom: 64px;
	}

	.article h1 {
		font-size: 3.2rem;
	}

	.article-hero {
		height: 300px;
	}

	.article h2 {
		font-size: 2.3rem;
	}

	.page-heading {
		padding-block: 24px 8px;
	}

	.page-heading h1 {
		font-size: 2.7rem;
	}

	.page-heading p {
		font-size: 0.95rem;
	}
}

@media (hover: hover) and (pointer: fine) {
	.post-list a:hover h2 {
		color: var(--fg-color-accent);
	}
}