/* ==========================================================================
   Cairn — inner pages
   ========================================================================== */

/* --- Shared page openings -------------------------------------------------- */

.phead,
.shead,
.shead2,
.jhead,
.chead {
	padding-block-start: clamp(7.5rem, 14vw, 12rem);
}

.phead__grid,
.chead__grid,
.shead__grid,
.jhead__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: end;
}

@media (min-width: 900px) {
	.phead__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); }
	.chead__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
	.jhead__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
	.shead__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: end; }
}

.phead .sec-stmt,
.shead2 .sec-stmt,
.chead .sec-stmt,
.jhead .sec-stmt { font-size: var(--step-4); max-width: 14ch; }

.phead__meta { border-block-start: var(--hair) solid var(--rule); padding-block-start: 1.5rem; }

/* --- Projects index --------------------------------------------------------- */

.pfilter {
	display: grid;
	gap: 1.25rem;
	padding-block-end: 1.25rem;
	border-block-end: var(--hair) solid var(--rule);
}

@media (min-width: 800px) {
	.pfilter {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 2rem;
	}
}

.pfilter__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pfilter__views { white-space: nowrap; }
.pfilter__status { margin-block: 1.25rem 2.25rem; }

.pgrid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1.5rem, 3.2vw, 3rem) var(--col-gap);
	align-items: start;
	grid-auto-flow: row dense;
}

.gcard { grid-column: span 12; }

@media (min-width: 760px) {
	.span-12 { grid-column: span 12; }
	.span-7 { grid-column: span 7; }
	.span-6 { grid-column: span 6; }
	.span-5 { grid-column: span 5; }
	.span-4 { grid-column: span 4; }
	.span-5 .gcard__title,
	.span-4 .gcard__title { font-size: var(--step-1); }
	.span-4 .gcard__summary,
	.span-5 .gcard__summary { font-size: var(--step--1); }
}

@media (min-width: 1100px) {
	.span-12 .gcard__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 5vw, 4rem);
	}
	.span-12 .gcard__ref,
	.span-12 .gcard__title,
	.span-12 .gcard__meta { grid-column: 1; }
	.span-12 .gcard__summary { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
	.span-12 .gcard__title { font-size: var(--step-3); }
}

.gcard.is-hidden { display: none; }
.pgrid__empty { padding-block: 4rem; text-align: center; }

.parchive { overflow-x: auto; }

.parchive__table { font-size: var(--step--1); min-width: 44rem; }

.parchive__table th,
.parchive__table td {
	text-align: start;
	padding-block: 0.95rem;
	border-block-end: var(--hair) solid var(--rule);
	vertical-align: baseline;
}

.parchive__table thead th { border-block-end-color: var(--rule-strong); }
.parchive__table td:nth-child(2) { font-family: var(--font-display); font-size: var(--step-1); }
.parchive__table tr.is-hidden { display: none; }

/* --- Project detail --------------------------------------------------------- */

.phero {
	min-height: 88vh;
	min-height: 88svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding-block-start: 8rem;
	padding-block-end: 0;
}

.phero__media { position: absolute; inset: 0; z-index: 0; }

.phero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: hero-drift 20s var(--ease) both;
}

.phero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(24, 24, 23, 0.95) 0%,
		rgba(24, 24, 23, 0.45) 45%, rgba(24, 24, 23, 0.35) 100%);
}

.phero__inner {
	position: relative;
	z-index: 2;
	padding-block-end: clamp(2rem, 5vw, 3.5rem);
}

.phero__ref { color: var(--accent-ink); margin-block-end: clamp(1rem, 2.5vw, 1.75rem); }
.phero__title { font-size: var(--step-5); line-height: 0.95; }
.phero__place { margin-block-start: 1.25rem; display: flex; align-items: center; flex-wrap: wrap; }

.phero__bar {
	position: relative;
	z-index: 2;
	border-block-start: var(--hair) solid var(--rule);
	background: rgba(24, 24, 23, 0.72);
}

.phero__bar-inner { padding-block: 1.1rem; }

.pfact__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

@media (min-width: 900px) {
	.pfact__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}

.pfact__lede {
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.22;
	max-width: 22ch;
}

.pfact__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	padding-block-start: 1.5rem;
	border-block-start: var(--hair) solid var(--rule);
}

.pfact__list .meta-item dd { color: var(--ink-soft); }
.pfact__list .meta-item:last-child { grid-column: 1 / -1; }

.pstory { display: grid; gap: clamp(3rem, 7vw, 6rem); }

.pstory__row { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }

@media (min-width: 900px) {
	.pstory__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.pstory__row--text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.pstory__row--text .pstory__text { grid-column: 2; }
}

.pstory__title { font-size: var(--step-2); margin-block-end: 1.25rem; }
.pstory__text p + p { margin-block-start: 1em; }
.pstory__text p { max-width: 48ch; }

.pdraw__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

@media (min-width: 1000px) {
	.pdraw__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}

.pdraw__title { font-family: var(--font-display); font-size: var(--step-2); margin-block-end: 1rem; }
.pdraw__body { color: var(--ink-soft); max-width: 34ch; margin-block-end: 1.75rem; }

.pgal .sec-meta { margin-block-end: 0; }

/* --- Studio ------------------------------------------------------------------ */

.belief-list { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }

@media (min-width: 700px) { .belief-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .belief-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.belief {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	padding-block-start: 1.25rem;
	border-block-start: var(--hair) solid var(--rule-strong);
}

.belief__ref { color: var(--accent-ink); }
.belief__title { font-size: var(--step-1); }
.belief__body { font-size: var(--step--1); line-height: 1.65; }

.tl { position: relative; }

.tl-line {
	position: absolute;
	inset-block: 0.85rem;
	inset-inline-start: 0.28rem;
	width: var(--hair);
	background: var(--rule);
}

@media (min-width: 800px) { .tl-line { inset-inline-start: 7.28rem; } }

.tl-line span { position: absolute; inset-block-start: 0; inset-inline: 0; height: 0%; background: var(--accent-ink); }

.tl-list { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }

.tl-item {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	gap: 0.35rem 1.25rem;
	align-items: baseline;
}

@media (min-width: 800px) {
	.tl-item { grid-template-columns: 7rem 1.5rem minmax(0, 1fr); gap: 1.25rem; }
}

.tl-year { color: var(--accent-ink); font-size: var(--step-0); }

.tl-mark {
	width: 0.6rem;
	height: 0.6rem;
	border: var(--hair) solid var(--accent-ink);
	transform: translateY(0.35em);
	justify-self: start;
	background: var(--bg);
}

@media (max-width: 799px) { .tl-year { grid-column: 2; } .tl-mark { grid-row: 1; } .tl-body { grid-column: 2; } }

.tl-title { font-size: var(--step-1); margin-block-end: 0.35rem; }
.tl-body p { max-width: 48ch; }

.people {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.person__frame { margin-block-end: 1.1rem; }

.person__img {
	filter: grayscale(1) contrast(1.06) brightness(1.02);
	transition: filter 0.7s var(--ease), transform 1.1s var(--ease-out);
}

.person:hover .person__img { filter: grayscale(0.15) contrast(1); transform: scale(1.03); }
.person__name { font-size: var(--step-1); }
/* Inline flow, not flex: the role can be long enough to wrap, and as a
   flex item it would break away from the date instead of with it. */
.person__role { margin-block: 0.3rem 0.75rem; }
.person__text { font-size: var(--step--1); line-height: 1.65; }
.person__detail { margin-block-start: 0.75rem; font-size: var(--step--2); }

.person--note {
	align-self: end;
	padding-block-start: 1.15rem;
	border-block-start: var(--hair) solid var(--rule-strong);
}

.person--note .person__name { margin-block-end: 0.75rem; }

.wspace {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

@media (min-width: 900px) { .wspace > *:nth-child(2) { margin-block-start: clamp(2rem, 5vw, 4rem); } }

/* --- Services ---------------------------------------------------------------- */

.sentry-sec { padding-block: clamp(3.5rem, 8vw, 8rem); }

.sentry { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

@media (min-width: 900px) {
	.sentry { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
	.sentry--flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
	.sentry__media { position: sticky; top: 7.5rem; }
}

.sentry__title { font-size: var(--step-3); }
.sentry__lead { font-family: var(--font-display); font-size: var(--step-1); margin-block: 1rem 1.5rem; max-width: 32ch; }
.sentry__text p + p { margin-block-start: 1em; }
.sentry__text p { max-width: 48ch; }

.sentry__includes { margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: var(--hair) solid var(--rule); }
.sentry__includes h3 { margin-block-end: 1rem; }
.sentry__includes ul { display: grid; gap: 0.5rem; }

.sentry__includes li {
	position: relative;
	padding-inline-start: 1.5rem;
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.sentry__includes li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.72em;
	width: 0.7rem;
	height: var(--hair);
	background: var(--accent-ink);
}

.sentry__rel { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
.sentry__rel h3 { margin-block-end: 1.25rem; }

.srel-list {
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.step-list { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 700px) { .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .step-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step {
	display: grid;
	gap: 0.6rem;
	align-content: start;
	padding-block-start: 1.15rem;
	border-block-start: var(--hair) solid var(--rule-strong);
}

.step__ref { color: var(--accent-ink); }
.step__title { font-size: var(--step-1); }
.step p { font-size: var(--step--1); line-height: 1.65; }

/* --- Process ------------------------------------------------------------------ */

.stage-list { display: grid; gap: clamp(3rem, 7vw, 6rem); }

.stage { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 900px) {
	.stage {
		grid-template-columns: 5rem minmax(0, 1.15fr) minmax(0, 0.65fr);
		gap: clamp(1.5rem, 4vw, 3.5rem);
		align-items: start;
	}
}

.stage__rule {
	grid-column: 1 / -1;
	height: var(--hair);
	background: var(--rule-strong);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.1s var(--ease-out);
}

.stage.is-in .stage__rule { transform: scaleX(1); }
.stage__ref { color: var(--accent-ink); font-size: var(--step-1); }
.stage__title { font-size: var(--step-3); }
.stage__lead { font-family: var(--font-display); font-size: var(--step-1); margin-block: 0.85rem 1.35rem; max-width: 30ch; }
.stage__main p + p { margin-block-start: 1em; }
.stage__main p { max-width: 48ch; }

.stage__outputs { margin-block-start: 1.75rem; padding-block-start: 1.35rem; border-block-start: var(--hair) solid var(--rule); }
.stage__outputs h3 { margin-block-end: 0.85rem; }
.stage__outputs ul { display: grid; gap: 0.45rem; }

.stage__outputs li {
	position: relative;
	padding-inline-start: 1.5rem;
	font-size: var(--step--1);
	color: var(--ink-soft);
}

.stage__outputs li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.72em;
	width: 0.7rem;
	height: var(--hair);
	background: var(--accent-ink);
}

.stage__dur { margin-block-start: 0.85rem; }

.compare {
	position: relative;
	overflow: hidden;
	margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
	display: grid;
	gap: 1rem;
}

.compare__pane { position: relative; }
.compare__img { width: 100%; height: auto; }

.compare__tag {
	position: absolute;
	inset-block-end: 0.9rem;
	padding: 0.4rem 0.75rem;
	background: rgba(24, 24, 23, 0.78);
	color: #f1eee7;
	font-size: var(--step--2);
	letter-spacing: 0.08em;
}

.compare__tag--before { inset-inline-start: 0.9rem; }
.compare__tag--after { inset-inline-end: 0.9rem; }
.compare__handle,
.compare__range { display: none; }

.js .compare {
	display: block;
	aspect-ratio: 16 / 9;
	cursor: ew-resize;
	touch-action: pan-y;
}

.js .compare__pane {
	position: absolute;
	inset: 0;
}

.js .compare__pane--before { clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); }
.js .compare__img { height: 100%; object-fit: cover; }

.js .compare__handle {
	display: block;
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--split, 50%);
	width: 2px;
	margin-inline-start: -1px;
	background: rgba(241, 238, 231, 0.9);
	z-index: 3;
}

.js .compare__grip {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 2.75rem;
	height: 2.75rem;
	margin: -1.375rem 0 0 -1.375rem;
	border: 2px solid rgba(241, 238, 231, 0.9);
	border-radius: 50%;
	background: rgba(24, 24, 23, 0.35);
}

.js .compare__grip::before,
.js .compare__grip::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	width: 0.45rem;
	height: 0.45rem;
	border-inline-start: 2px solid rgba(241, 238, 231, 0.9);
	border-block-start: 2px solid rgba(241, 238, 231, 0.9);
}

.js .compare__grip::before { inset-inline-start: 0.75rem; transform: translateY(-50%) rotate(-45deg); }
.js .compare__grip::after { inset-inline-end: 0.75rem; transform: translateY(-50%) rotate(135deg); }

.js .compare__range {
	display: block;
	position: absolute;
	inset-block-end: 1rem;
	inset-inline: 12%;
	z-index: 4;
	appearance: none;
	height: 2.5rem;
	background: transparent;
	opacity: 0;
}

.js .compare__range:focus-visible { opacity: 1; outline-offset: 6px; }

.rule-list { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 700px) { .rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rule {
	display: grid;
	gap: 0.6rem;
	padding-block-start: 1.15rem;
	border-block-start: var(--hair) solid var(--rule-strong);
}

.rule__title { font-size: var(--step-1); }

/* --- Journal ------------------------------------------------------------------ */

.jsearch { display: grid; gap: 0.85rem; align-content: end; }

.jsearch__input {
	width: 100%;
	padding: 0.85rem 0;
	border-block-end: var(--hair) solid var(--rule-strong);
	color: var(--ink);
	font-size: var(--step-0);
}

.jsearch__input::placeholder { color: var(--ink-soft); opacity: 0.6; }
.jsearch__input:focus { outline: none; border-color: var(--accent-ink); }
.jchips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jsearch__status { margin-block-start: 0.25rem; }

.jlead__link { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); text-decoration: none; align-items: center; }

@media (min-width: 900px) {
	.jlead__link { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

.jlead__frame img { transition: transform 1.1s var(--ease-out); }
.jlead__link:hover .jlead__frame img { transform: scale(1.03); }
.jlead__meta { display: flex; align-items: center; flex-wrap: wrap; }
.jlead__title { font-size: var(--step-3); margin-block: 0.75rem 1rem; }
.jlead__stand { color: var(--ink-soft); font-size: var(--step-1); max-width: 42ch; }

.jarchive {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.jcard.is-hidden { display: none; }
.jarchive__empty { padding-block: 3rem; text-align: center; }

.ahead { padding-block-start: clamp(7.5rem, 14vw, 12rem); }
.ahead__grid { max-width: 62rem; }
.ahead__meta { display: flex; align-items: center; flex-wrap: wrap; margin-block-end: clamp(1.25rem, 3vw, 2rem); }
.ahead__title { font-size: var(--step-4); }
.ahead__stand { font-size: var(--step-1); color: var(--ink-soft); margin-block: 1.5rem 1rem; max-width: 46ch; }
.ahead__by { color: var(--accent-ink); }
.ahead__media { margin-block-start: clamp(2rem, 5vw, 3.5rem); }

.abody-sec { padding-block-start: clamp(2.5rem, 5vw, 4rem); }
.abody__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }

@media (min-width: 1000px) {
	.abody__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.4fr); }
	.aside-rail { position: sticky; top: 7.5rem; }
}

.abody { max-width: 34em; }
.aside-rail { display: grid; gap: 0.75rem; padding-block-start: 1.25rem; border-block-start: var(--hair) solid var(--rule-strong); }
.aside-rail__ref { color: var(--accent-ink); }
.aside-rail__note { font-size: var(--step--1); color: var(--ink-soft); margin-block-start: 1rem; }
/* Fixed at two columns so the tile width stays predictable and `sizes` can
   describe it honestly at every breakpoint. */
.arel-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin-block-start: 0.5rem;
}

/* --- Contact -------------------------------------------------------------------- */

.chead__direct { display: grid; gap: 0.5rem; align-content: end; }
.chead__mail { font-family: var(--font-display); font-size: var(--step-2); }

.cform__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }

@media (min-width: 900px) {
	.cform__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
	.cform__side { position: sticky; top: 7.5rem; }
}

.cform__title { font-size: var(--step-2); margin-block-end: 1rem; }
.cform__side p { color: var(--ink-soft); max-width: 34ch; margin-block-end: 2rem; }

.enquiry__note { margin-block-end: 2rem; }
.enquiry__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

@media (min-width: 700px) {
	.enquiry__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.enquiry__grid > .field:nth-child(7) { grid-column: 1 / -1; }
}

.enquiry__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.enquiry__done {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	display: grid;
	gap: 1rem;
	max-width: 44ch;
}

.enquiry__done .mono { color: var(--accent-ink); }
.enquiry__done-title { font-size: var(--step-2); }
.enquiry__done p { color: var(--ink-soft); }
.enquiry__done .cta { justify-self: start; margin-block-start: 1rem; }

.studio-cards { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

@media (min-width: 800px) { .studio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.studio-card { display: grid; gap: 1.5rem; }

.studio-card__plan {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--surface);
	border: var(--hair) solid var(--rule);
}

.studio-card__city { font-size: var(--step-2); margin-block: 0.4rem 0.9rem; }
.studio-card__addr { font-style: normal; line-height: 1.7; color: var(--ink-soft); }
.studio-card__body > p { margin-block-start: 0.6rem; }
.studio-card__hours { color: var(--ink-soft); }

/* --- 404 -------------------------------------------------------------------------- */

.nf {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-block: 8rem 4rem;
}

.nf__media { position: absolute; inset: 0; z-index: 0; }

.nf__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.7) brightness(0.6);
}

.nf__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(24, 24, 23, 0.82); }
.nf__inner { position: relative; z-index: 2; }
.nf__code { color: var(--accent-ink); display: flex; align-items: center; margin-block-end: 1.5rem; }
.nf__stmt { font-size: var(--step-5); line-height: 0.95; max-width: 12ch; }
.nf__body { color: var(--ink-soft); font-size: var(--step-1); max-width: 40ch; margin-block: 1.5rem 2.25rem; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 2rem; }

.nf__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
	padding-block-start: 1.75rem;
	border-block-start: var(--hair) solid var(--rule);
	font-family: var(--font-mono);
	font-size: var(--step--1);
}

.nf__links a { text-decoration: none; color: var(--ink-soft); }
.nf__links a:hover { color: var(--ink); }