/* ==========================================================================
   Cairn — layout: measure, header, index overlay, datum rail, footer, cursor
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

@media (min-width: 1280px) {
	:root { --rail: 4.5rem; }
	.wrap { padding-inline-start: calc(var(--gutter) + var(--rail)); }
}

/* --- Header -------------------------------------------------------------- */

.site-head {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 90;
	color: var(--ink);
	transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.site-head::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: var(--hair);
	background: var(--rule);
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}

.site-head.is-solid { background: var(--bg); }
.site-head.is-solid::after { opacity: 1; }

.site-head.is-hidden { transform: translateY(-101%); }

.site-head {
	transform: translateY(0);
	transition:
		transform 0.5s var(--ease),
		background-color 0.4s var(--ease),
		color 0.4s var(--ease);
}

.site-head__inner {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
	min-height: 4.5rem;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 4vw, 3rem);
}

@media (min-width: 1280px) {
	.site-head__inner { padding-inline-start: calc(var(--gutter) + var(--rail)); }
	.site-head__inner { min-height: 5.25rem; }
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	margin-inline-end: auto;
	/* Padding, not height: the mark is 20px and the tap target must be 44. */
	padding-block: 0.65rem;
}

.wordmark__text {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
}

.mark { overflow: visible; }
.mark-stone { fill: currentColor; }
.mark-stone--3 { transition: transform 0.4s var(--ease-out); }
.mark-stone--2 { transition: transform 0.4s var(--ease-out) 0.03s; }

.wordmark:hover .mark-stone--3 { transform: translate(0.9px, -1.1px); }
.wordmark:hover .mark-stone--2 { transform: translate(-0.5px, -0.4px); }

.site-nav { display: none; }

@media (min-width: 1024px) {
	.site-nav { display: block; }
	.site-nav__list { display: flex; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
}

.nav-link {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-decoration: none;
	position: relative;
	padding-block: 0.35rem;
	color: var(--ink);
	opacity: 0.78;
	transition: opacity var(--dur-fast) var(--ease);
}

.nav-link::after {
	content: "";
	position: absolute;
	inset-block-end: 0.1rem;
	inset-inline-start: 0;
	width: 100%;
	height: var(--hair);
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur-fast) var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-current { opacity: 1; }

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-current::after {
	transform: scaleX(1);
	transform-origin: left;
}

.index-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0;
	color: inherit;
}

@media (min-width: 1024px) {
	/* .site-nav already lists every link here — the overlay toggle is only
	   needed below the breakpoint where that nav is hidden. */
	.index-toggle { display: none; }
}

.index-toggle__label {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.index-toggle__bars {
	display: block;
	width: 1.6rem;
	height: 0.65rem;
	position: relative;
}

.index-toggle__bars i {
	position: absolute;
	inset-inline: 0;
	height: var(--hair);
	background: currentColor;
	transition: transform 0.4s var(--ease-out);
}

.index-toggle__bars i:first-child { inset-block-start: 0; }
.index-toggle__bars i:last-child { inset-block-end: 0; }

.index-toggle:hover .index-toggle__bars i:first-child { transform: translateY(2px); }
.index-toggle:hover .index-toggle__bars i:last-child { transform: translateY(-2px); }

body.index-open .index-toggle__bars i:first-child { transform: translateY(5px) rotate(15deg); }
body.index-open .index-toggle__bars i:last-child { transform: translateY(-5px) rotate(-15deg); }

/* --- Fullscreen index ---------------------------------------------------- */

.index-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: #181817;
	color: #f1eee7;
	--ink: #f1eee7;
	--ink-soft: #a9a49a;
	--rule: rgba(241, 238, 231, 0.16);
	--rule-strong: rgba(241, 238, 231, 0.4);
	--accent-ink: #c9ae7d;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s var(--ease), visibility 0.45s;
}

body.index-open .index-overlay {
	opacity: 1;
	visibility: visible;
}

.index-overlay__grid {
	min-height: 100%;
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-content: center;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding: 7rem var(--gutter) 3.5rem;
}

@media (min-width: 900px) {
	.index-overlay__grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: center;
	}
}

.index-list { display: grid; }

.index-item + .index-item { border-block-start: var(--hair) solid var(--rule); }

.index-link {
	display: flex;
	align-items: baseline;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: clamp(0.7rem, 1.8vw, 1.15rem);
	text-decoration: none;
	transition: padding-inline-start 0.4s var(--ease-out), color 0.3s var(--ease);
}

.index-link__num { color: var(--ink-soft); }

.index-link__label {
	font-size: clamp(2rem, 5.5vw, 3.75rem);
	line-height: 1;
}

.index-link:hover,
.index-link:focus-visible {
	padding-inline-start: 1.15rem;
	color: var(--accent-ink);
}

.index-aside {
	display: grid;
	gap: 2rem;
	align-content: center;
}

.index-preview {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	max-width: 26rem;
	background: #201f1e;
}

.index-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.25) contrast(1.02);
	transition: opacity 0.35s var(--ease);
}

.index-preview.is-swapping img { opacity: 0; }

@media (max-width: 899px) { .index-preview { display: none; } }

.index-contact { display: grid; gap: 0.6rem; }
.index-contact__lines { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.7; }
.index-social { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-block-start: 0.5rem; }
.index-social a { font-family: var(--font-mono); font-size: var(--step--1); text-decoration: none; }

/* --- Datum rail ---------------------------------------------------------- */

.datum-rail {
	display: none;
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	width: calc(var(--gutter) + var(--rail));
	z-index: 70;
	pointer-events: none;
	color: var(--ink);
	transition: color 0.4s var(--ease);
	align-items: center;
	justify-content: center;
}

@media (min-width: 1280px) {
	.datum-rail { display: flex; }
}

.rail-line {
	position: absolute;
	inset-block: 22vh;
	inset-inline-start: calc(var(--gutter) + 0.75rem);
	width: var(--hair);
	background: var(--rule);
}

.rail-progress {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 0%;
	background: var(--accent-ink);
	transition: height 0.14s linear;
}

.rail-ticks {
	position: absolute;
	inset-block: 22vh;
	inset-inline-start: calc(var(--gutter) + 0.75rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.rail-tick {
	position: relative;
	width: 0.4rem;
	height: 1rem;
	color: var(--ink-soft);
	opacity: 0.4;
	transition: opacity 0.35s var(--ease), color 0.35s var(--ease);
}

.rail-tick::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.5rem;
	width: 0.4rem;
	height: var(--hair);
	background: currentColor;
	transition: width 0.35s var(--ease-out);
}

/* Only the level you are standing on is written out, and it is set into the
   gutter to the left of the line so it can never reach the text column. */
.rail-tick span {
	position: absolute;
	inset-inline-end: calc(100% + 0.55rem);
	inset-block-start: 0;
	font-size: 0.5rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.35s var(--ease);
}

.rail-tick.is-current {
	opacity: 1;
	color: var(--accent-ink);
}

.rail-tick.is-current::before { width: 0.85rem; }
.rail-tick.is-current span { opacity: 1; }

.rail-now {
	position: absolute;
	inset-block-end: 2.5rem;
	inset-inline-start: calc(var(--gutter) + 0.75rem);
	transform-origin: left bottom;
	transform: rotate(-90deg) translateX(0);
	font-size: 0.5625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ink-soft);
}

.rail-bar {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	z-index: 95;
	pointer-events: none;
}

.rail-bar span {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--accent-ink);
	transition: width 0.12s linear;
}

@media (min-width: 1280px) { .rail-bar { display: none; } }

/* --- Footer -------------------------------------------------------------- */

.site-foot {
	background: var(--bg);
	color: var(--ink);
	padding-block: clamp(3.5rem, 7vw, 6.5rem) 2rem;
}

.foot-top {
	display: grid;
	gap: 1.75rem;
	padding-block-end: clamp(2.5rem, 5vw, 4rem);
	border-block-end: var(--hair) solid var(--rule);
}

@media (min-width: 900px) {
	.foot-top {
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: clamp(2rem, 5vw, 5rem);
	}
}

.foot-mark {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	text-decoration: none;
}

.foot-mark span {
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.36em;
	text-indent: 0.36em;
}

.foot-line {
	font-family: var(--font-display);
	font-size: var(--step-1);
	line-height: 1.25;
	color: var(--ink-soft);
	max-width: 34ch;
}

.foot-cta {
	display: inline-flex;
	align-items: baseline;
	gap: 0.8rem;
	text-decoration: none;
	font-size: var(--step-2);
	color: var(--accent-ink);
	white-space: nowrap;
}

.foot-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.75rem, 4vw, 3rem);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 700px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .foot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.foot-col h2 { margin-block-end: 1.1rem; }
.foot-list { display: grid; gap: 0.55rem; }
.foot-list a { font-size: var(--step--1); text-decoration: none; color: var(--ink-soft); }
.foot-list a:hover { color: var(--ink); }

.foot-address {
	font-style: normal;
	font-size: var(--step--1);
	line-height: 1.75;
	color: var(--ink-soft);
}

.foot-base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	padding-block-start: 1.75rem;
	border-block-start: var(--hair) solid var(--rule);
}

.foot-base .to-top { margin-inline-start: auto; }

.to-top {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	color: var(--ink-soft);
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}

.to-top:hover { color: var(--ink); }
.to-top .arrow { transition: transform var(--dur-fast) var(--ease); }
.to-top:hover .arrow { transform: translateY(-0.25em); }

/* --- Custom cursor ------------------------------------------------------- */

.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
	.cursor {
		display: grid;
		place-items: center;
		position: fixed;
		inset-block-start: 0;
		inset-inline-start: 0;
		z-index: 120;
		width: 5.5rem;
		height: 5.5rem;
		margin: -2.75rem 0 0 -2.75rem;
		border-radius: 50%;
		background: var(--accent, #b59a6a);
		color: #181817;
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		pointer-events: none;
		opacity: 0;
		transform: scale(0.2);
		transition: opacity 0.25s var(--ease), transform 0.35s var(--ease-out);
		will-change: transform;
	}

	.cursor.is-on {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cursor { display: none !important; }
}