/* styles.css — the "cayetana" site: deep forest green, old gold and a tall serif over
   photographs at full bleed. Like "night" its GROUND is dark, so it restates --ok/--warn/--bad:
   base.css defaults them to dark inks nobody could read here. Fulfils the site contract
   (docs/WEBSITE.md): the four tokens below are what every module's pages read; the primitives
   come from /base.css, linked before this file.

   The serif is a system stack on purpose — a page loads nothing from a third party, so a
   visitor without Garamond gets Palatino or Georgia and the page still reads as itself. */

:root {
	--bg: #1E2A22;
	--text: #F7F3EC;
	--accent: #B07C3A;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--surface: #24312A;
	--line: rgba(232, 223, 205, 0.14);
	--muted: #B3BCAF;
	--accent-contrast: #17201A;
	--accent-text: #DCC79E;
	--font-display: "Cormorant Garamond", "EB Garamond", Garamond, "Palatino Linotype", Palatino, Georgia, serif;
	--radius: 4px;
	--radius-sm: 3px;
	--radius-control: 3px;
	--wrap: 76rem;
	--shadow: none;
	--ring: 0 0 0 4px rgba(176, 124, 58, 0.3);
	--ok: #7FC98F;
	--warn: #E0BC72;
	--bad: #E2907F;
}

body {
	font-size: 1.02rem;
	line-height: 1.65;
	background-color: var(--bg);
}

/* The serif carries every heading; at these sizes it wants a light weight and tight
   leading, which is the whole difference between a serif that reads as editorial and one
   that reads as a default. */
h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.9rem, 6.4vw, 5.4rem); line-height: 0.96; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.04; }
h3 { font-size: 1.5rem; line-height: 1.15; }

/* The accent of the look: one italic gold half inside the headline. */
h1 em, h2 em { font-style: italic; color: var(--accent-text); }

.eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--accent-text);
}
.lead { font-size: 1.12rem; color: var(--muted); max-width: 34rem; }

.button {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 0.85rem 1.5rem;
}
.button--light { background: transparent; border-color: rgba(232, 223, 205, 0.35); color: var(--text); }
.button--light:hover { border-color: var(--accent); color: var(--accent-text); }

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

.topbar {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(30, 42, 34, 0.82);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}
.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.1rem;
}
.brand {
	font-family: var(--font-display);
	font-size: 1.45rem;
	letter-spacing: 0.01em;
	text-decoration: none;
}
.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 1.8rem); }
.nav a {
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	color: var(--muted);
}
.nav a:hover { color: var(--accent-text); }
/* Restated because .nav a is more specific than .button: without it the gold button would
   take the nav's muted green and read as grey text on gold. */
.nav a.button { padding: 0.6rem 1.2rem; color: var(--accent-contrast); }
.nav a.button:hover { color: var(--accent-contrast); }
.nav .avatar { border-color: var(--line); background: rgba(232, 223, 205, 0.1); color: var(--text); }

/* Hero: the photograph, the words at its foot, the figures on its floor --- */

.hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(88vh, 52rem);
	overflow: hidden;
	isolation: isolate;
}
.hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The scrim: what keeps the type readable over any photograph the business uploads. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, var(--bg) 2%, rgba(30, 42, 34, 0.88) 30%, rgba(30, 42, 34, 0.3) 72%, rgba(30, 42, 34, 0.55)),
		linear-gradient(to right, rgba(30, 42, 34, 0.8), transparent 60%);
}
.hero-inner { position: relative; width: 100%; }
.hero-copy { padding-block: clamp(5rem, 13vw, 10rem) 0; max-width: 44rem; }
.hero-copy .lead { color: rgba(247, 243, 236, 0.84); }
.hero .actions { margin-top: 2.2rem; }

/* The figures sit on the floor of the photograph, over a hairline — the strip that turns a
   picture into a claim. */
.figures {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-block: 1.6rem 2.2rem;
	border-top: 1px solid var(--line);
}
.figure { display: grid; gap: 0.15rem; }
.figure-num { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; }
.figure-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--muted);
}

/* Bands ----------------------------------------------------------------- */

/* The scroll margin is the sticky header's height: without it a /#offer link lands with the
   heading hidden under the bar. */
.band { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line); scroll-margin-top: 4.5rem; }
.band--tint { background: rgba(232, 223, 205, 0.03); }
.band-head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.band-head p { color: var(--muted); }
.band-head .eyebrow { margin-bottom: 0.9rem; }

/* Who we are: the picture beside the words, with the four facts under them - */

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.split img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
}
.split .eyebrow { display: block; margin-bottom: 0.9rem; }
.split p { color: var(--muted); }
.facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.4rem 2rem;
	margin-top: 2.2rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--line);
}
.fact { display: grid; gap: 0.3rem; }
.fact-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--accent-text);
}
.fact-value { font-family: var(--font-display); font-size: 1.25rem; }

/* What we offer: a photograph, a gold tag on its corner, a name and a price - */

.cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.pcard:hover { border-color: rgba(176, 124, 58, 0.6); transform: translateY(-3px); }
.pcard img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.pcard-tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.32rem 0.7rem;
	border-radius: var(--radius-sm);
	background: rgba(23, 32, 26, 0.82);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--accent-text);
}
.pcard-body { display: grid; gap: 0.5rem; padding: 1.4rem 1.5rem 1.7rem; }
.pcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pcard-head h3 { margin: 0; }
.pcard-price { font-family: var(--font-display); font-size: 1.45rem; color: var(--accent-text); }
.pcard-text { color: var(--muted); font-size: 0.95rem; }

/* The place: one wide photograph and two beside it ----------------------- */

.mosaic { display: grid; gap: 1rem; grid-template-columns: 1.15fr 1fr; }
.shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
.shot--wide { grid-row: span 2; }
.shot img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.6s ease;
}
/* The tall one takes whatever the two beside it add up to, so the three tops and bottoms
   line up; an aspect-ratio here would fight that and push the row out. */
.shot--wide img { aspect-ratio: auto; }
.shot:hover img { transform: scale(1.03); }
/* The caption only on hover: a photograph reads better with nothing written over it. */
.shot figcaption {
	position: absolute;
	inset: auto 0 0;
	padding: 2.5rem 1.2rem 1rem;
	background: linear-gradient(to top, rgba(23, 32, 26, 0.9), transparent);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.shot:hover figcaption { opacity: 1; }

/* Visit: two cards ------------------------------------------------------- */

.visit { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.visit .card { background: var(--surface); border-color: var(--line); }
.visit .card h3 { margin-bottom: 1rem; }
.visit-line { margin: 0 0 0.5rem; color: var(--muted); }
.visit-line a { color: var(--accent-text); text-decoration: none; }

/* The closing band ------------------------------------------------------- */

.cta { text-align: center; padding-block: clamp(1.5rem, 4vw, 3rem); }
.cta h2 { max-width: 24rem; margin-inline: auto; }
.cta p { color: var(--muted); max-width: 32rem; margin-inline: auto; }
.cta .actions { justify-content: center; }

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

.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.4rem; align-items: start; }
.contact-aside { display: grid; gap: 1.4rem; align-content: start; }
.contact-grid .card { background: var(--surface); border-color: var(--line); }
.contact-grid input, .contact-grid textarea { background: rgba(232, 223, 205, 0.05); }
/* base.css draws the submit as a rounded sentence-case button; here every other button is a
   squared, letterspaced capital, and a form is no place to break that. */
.form button[type="submit"] {
	padding: 0.85rem 1.5rem;
	font: 600 0.78rem/1.2 var(--font);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

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

.foot { border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--muted); }
.foot-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem 2rem;
	padding-block: 2rem;
}
.foot-contact, .foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; }
.foot a { color: var(--text); text-decoration: none; }
.foot a:hover { color: var(--accent-text); }
.foot .paybrands img { opacity: 0.7; }

@media (max-width: 56rem) {
	.split, .contact-grid { grid-template-columns: 1fr; }
	.split img { aspect-ratio: 3 / 2; }
	.figures { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
	.mosaic { grid-template-columns: 1fr; }
	.shot--wide { grid-row: auto; }
	.shot--wide img { aspect-ratio: 3 / 2; }
	.nav a:not(.button) { display: none; }
}