@charset "UTF-8";
/**
 * Catcha 2026 — header, navigation, buttons
 *
 * 05 Header & navigation (incl. the dropdown and mobile menu)
 * 06 Buttons & links
 *
 * One slice of the stylesheet. Load order and what lives where:
 * docs/MAP.md at the repo root.
 */

/* =====================================================================
 * 05  HEADER & NAVIGATION
 * ================================================================== */
/* The masthead is `--tint` (#F1ECE9) — the lightest step of the warm ramp
   above the ground, so it seats the top of the page without introducing a
   new tone. It was near-black, then brand red, then `--tint-deep`; each in
   turn read too heavy against the light bands below, so it has come up the
   ramp rather than down it. Separation is the shadow's job now, not the
   background's.
   Opaque, not frosted: frosted glass is a software-product convention. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--tint-head);
	/* The one place elevation is allowed. `--el-*` is `none` site-wide because
	   the page is ruled, not stacked — but the masthead is the only element
	   content actually passes *under*. At rest nothing has passed under it
	   yet, so it carries no shadow and the top of the page reads as one flat
	   plane; the shadow fades in only once the page has moved. */
	box-shadow: none;
	transition: box-shadow var(--dur) var(--ease);
}
.is-scrolled .site-header { box-shadow: 0 2px 8px rgba(43, 22, 27, 0.10); }

.header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 82px;
	transition: min-height var(--dur) var(--ease);
}
.is-scrolled .header-bar { min-height: 66px; }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 112px; transition: width var(--dur) var(--ease); }
.is-scrolled .brand img { width: 98px; }

.nav { display: none; }
@media (min-width: 1080px) { .nav { display: block; } }

.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }

/* Rules, not pills: the current item is marked by a bar under the label. */
.nav-link {
	position: relative;
	display: block;
	padding: 9px 13px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.004em;
	color: var(--ink-2);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur) var(--ease);
}
.nav-link::after {
	content: "";
	position: absolute;
	left: 13px; right: 13px; bottom: 2px;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--ink); }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.nav-item.is-current > .nav-link { color: var(--accent); }
.nav-item.is-current > .nav-link::after { transform: scaleX(1); }

.nav-item--has-sub { position: relative; }
.nav-sub {
	position: absolute;
	top: calc(100% + 6px); left: 0;
	z-index: 1;
	min-width: 218px;
	margin: 0; padding: 7px;
	list-style: none;
	/* White, but given a firm border and a real shadow. This looked
	   transparent when it was a white panel with a 14%-opacity hairline and a
	   soft shadow sitting over a #F8F6F5 page — there was nothing to see. */
	background: var(--surface);
	border: 1px solid var(--line-firm);
	box-shadow: 0 16px 36px rgba(43, 22, 27, 0.18);
	opacity: 0; visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
}
.nav-item--has-sub:hover .nav-sub,
.nav-item--has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sub a {
	display: block;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--ink-2);
	text-decoration: none;
	transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.nav-sub a:hover { background: var(--ground); color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	color: var(--ink-3);
	transition: color var(--dur) var(--ease);
}
.icon-link:hover { color: var(--accent); }
.icon-link svg { width: 17px; height: 17px; }

.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px; height: 42px;
	padding: 0 10px;
	background: none; border: 0; cursor: pointer;
}
@media (min-width: 1080px) { .nav-toggle { display: none; } }
.nav-toggle span {
	display: block; height: 1.6px;
	background: var(--ink);
	transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 99;
	width: 100%; max-width: 100vw;
	background: var(--tint-head); /* the drawer drops out of the masthead — same tone */
	padding: 100px var(--pad) 40px;
	overflow-y: auto;
	overflow-x: hidden;
	opacity: 0; visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; max-width: 100%; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-nav a {
	display: block;
	padding: 15px 0;
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.014em;
	color: var(--ink);
	text-decoration: none;
}
.mobile-nav .nav-sub-m a {
	font-family: var(--sans);
	font-size: 15px; font-weight: 400;
	color: var(--ink-3);
	padding: 8px 0 8px 18px;
}
@media (min-width: 1080px) { .mobile-nav { display: none; } }

/* =====================================================================
 * 06  BUTTONS & LINKS
 * ================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	font-family: var(--label);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	/* No lift, no coloured glow — buttons change value on hover, they do not
	   levitate. The bouncing card is the single loudest tell of a template. */
	transition: background-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-firm); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* On the masthead the ghost button sits on tint, so it needs its own surface
   to read as a button rather than as an outlined word. */
.site-header .btn--ghost { background: var(--surface); border-color: var(--line-firm); }
.site-header .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Footer CTA. On the stone it inverts every other button on the site: a warm
   cream plate with near-black type. */
.btn--light { background: var(--deep-text); color: var(--deep); border-color: var(--deep-text); }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--sm { padding: 12px 20px; font-size: 10.5px; }

.link-underline {
	color: var(--accent);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1.5px;
	transition: background-size 300ms var(--ease-o);
	padding-bottom: 2px;
}
.link-underline:hover { background-size: 0% 1.5px; }

.arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
a:hover .arrow { transform: translateX(4px); }