/* ==========================================================================
   Zlatara Smaragd
   Ground: warm stone (#E6E3D9), pulled slightly grey rather than cream so the
   gold stays legible as metal — on a yellow-cast beige it goes muddy.
   Objects: product photography arrives shot on white, so image wells are pure
   #FFFFFF and a white-cyc shot meets no edge at all. White is functional here,
   not decorative: it is reserved for surfaces that hold a photograph.
   Ink: the brand emerald survives as the near-black text colour rather than as
   a field of green, which is also admin.css's --ink, so the two agree.
   Signature: the emerald cut — every image sits in a beveled-corner window
   with a hairline gold frame; the hero window carries the full step cut. On a
   light ground the frame is load-bearing, not decoration: it is the only thing
   separating a white well from the stone behind it.
   ========================================================================== */

/* --- Typefaces ----------------------------------------------------------- */

@font-face {
	font-family: Marcellus; font-style: normal; font-weight: 400; font-display: swap;
	src: url(/static/fonts/marcellus-400-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Marcellus; font-style: normal; font-weight: 400; font-display: swap;
	src: url(/static/fonts/marcellus-400-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Spectral; font-style: normal; font-weight: 300; font-display: swap;
	src: url(/static/fonts/spectral-300-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Spectral; font-style: normal; font-weight: 300; font-display: swap;
	src: url(/static/fonts/spectral-300-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Spectral; font-style: normal; font-weight: 400; font-display: swap;
	src: url(/static/fonts/spectral-400-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Spectral; font-style: normal; font-weight: 400; font-display: swap;
	src: url(/static/fonts/spectral-400-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Spectral; font-style: normal; font-weight: 500; font-display: swap;
	src: url(/static/fonts/spectral-500-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: Spectral; font-style: normal; font-weight: 500; font-display: swap;
	src: url(/static/fonts/spectral-500-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
	--ground: #E6E3D9;
	--ground-lift: #E0DCD1;
	--surface: #FFFFFF;
	--emerald: #012C23;

	--ink: #16211D;
	--ink-soft: #545E58;

	/* --gold is the only gold that may carry text: it clears AA (4.5:1) on all
	   three light grounds and takes white at 6.6:1 when used as a button fill.
	   --gold-line is decorative only — 1.8:1 on stone — and is also what gold
	   becomes inside the dark footer, where it is legible again. */
	--gold: #745821;
	--gold-deep: #5A4519;
	--gold-line: #C9A35C;

	--hair: rgba(116, 88, 33, .75);
	--hair-soft: rgba(116, 88, 33, .28);

	--display: Marcellus, "Times New Roman", serif;
	--body: Spectral, Georgia, serif;

	--gutter: clamp(1.25rem, 4vw, 3rem);
	--measure: 1240px;
	--bay: clamp(4.5rem, 9vw, 7.5rem);

	/* The emerald cut. Override --cut per component to resize the bevel. */
	--cut: 16px;
	--oct: polygon(
		var(--cut) 0, calc(100% - var(--cut)) 0,
		100% var(--cut), 100% calc(100% - var(--cut)),
		calc(100% - var(--cut)) 100%, var(--cut) 100%,
		0 calc(100% - var(--cut)), 0 var(--cut)
	);
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font: 400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.75 var(--body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

.sr {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

.skip {
	position: absolute; left: 50%; top: 0; z-index: 100;
	transform: translate(-50%, -120%);
	padding: .75rem 1.25rem;
	background: var(--gold); color: var(--surface);
	font: 400 .8rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
	text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.wrap {
	width: 100%; max-width: var(--measure);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --- Type system --------------------------------------------------------- */

.eyebrow, .mark {
	margin: 0;
	font: 400 .6875rem/1.6 var(--display);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--gold);
}

.section__title {
	margin: .5rem 0 0;
	font: 400 clamp(1.75rem, 1.1rem + 2.6vw, 2.9rem)/1.15 var(--display);
	letter-spacing: .04em;
	color: var(--ink);
}

.lede {
	margin: 1rem 0 0;
	max-width: 46ch;
	font-weight: 300;
	font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
	line-height: 1.7;
	color: var(--ink-soft);
}

.rule {
	height: 1px; border: 0; margin: 0;
	background: linear-gradient(90deg, var(--hair), transparent);
}

.link {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--hair);
	padding-bottom: 2px;
	transition: color .25s, border-color .25s;
}
.link:hover { color: var(--gold); border-color: var(--gold); }

.note {
	max-width: 58ch;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding-left: 1.25rem;
	border-left: 1px solid var(--hair);
	color: var(--ink-soft);
	font-weight: 300;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
	display: inline-block;
	padding: .95rem 1.9rem;
	border: 1px solid var(--hair);
	color: var(--ink);
	font: 400 .78rem/1 var(--display);
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	background: transparent;
	cursor: pointer;
	transition: border-color .3s, color .3s, background-color .3s;
}
.btn:hover { border-color: var(--gold); color: var(--gold); }

.btn--gold {
	border-color: var(--gold);
	background: var(--gold);
	color: var(--surface);
}
.btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--surface); }

.btn--wide { width: 100%; }

/* --- The emerald cut ----------------------------------------------------- */

.cut {
	position: relative;
	display: block;
	margin: 0;
	padding: 1px;
	border: 0;
	background: var(--hair);
	clip-path: var(--oct);
}
.cut > img,
.cut > iframe {
	width: 100%;
	clip-path: var(--oct);
}
.cut--lg { --cut: 26px; }

/* Light crossing a facet. The white core alone was enough on the emerald, but
   these wells now hold white-background product shots, where white over white
   is nothing at all — so the core keeps a pair of warm gold shoulders. Between
   them the sweep stays visible on a pale photo and a dark one. */
.cut::after {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg,
		transparent 34%,
		rgba(116, 88, 33, .10) 45%,
		rgba(255, 255, 255, .34) 50%,
		rgba(116, 88, 33, .10) 55%,
		transparent 66%);
	transform: translateX(-130%);
	transition: transform .95s cubic-bezier(.22, .61, .36, 1);
}
.cut:hover::after,
.cut:focus-visible::after { transform: translateX(130%); }

/* The hero window: outer hairline, a stone gap, then a second hairline —
   the concentric steps of an emerald cut. */
.stone { --cut: 30px; padding: 1px; background: var(--hair); clip-path: var(--oct); }
.stone__gap { --cut: 29px; padding: clamp(8px, 1.1vw, 13px); background: var(--ground); clip-path: var(--oct); }
.stone__line { --cut: 18px; position: relative; padding: 1px; background: var(--hair); clip-path: var(--oct); }
.stone__line > img {
	--cut: 17px;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	/* Crops from the left so the studio watermark in the photo's bottom-left
	   corner falls outside the window rather than showing as a fragment. */
	object-position: 78% center;
	clip-path: var(--oct);
}
.stone__line::after {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg,
		transparent 34%,
		rgba(116, 88, 33, .12) 45%,
		rgba(255, 255, 255, .38) 50%,
		rgba(116, 88, 33, .12) 55%,
		transparent 66%);
	transform: translateX(-130%);
}
.stone:hover .stone__line::after { transform: translateX(130%); transition: transform .95s cubic-bezier(.22, .61, .36, 1); }

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

.site-head {
	position: sticky; top: 0; z-index: 50;
	background: rgba(230, 227, 217, .86);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hair-soft);
}

.site-head__in {
	display: flex; align-items: center; gap: 1.5rem;
	min-height: 68px;
}

.brand {
	display: flex; align-items: center; gap: .7rem;
	margin-right: auto;
	color: var(--ink);
	text-decoration: none;
}
.brand__name {
	font: 400 .82rem/1 var(--display);
	letter-spacing: .24em;
	text-transform: uppercase;
	white-space: nowrap;
}
.diamond { width: 26px; height: 21px; color: var(--gold); flex: none; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.4rem); }
.nav a {
	color: var(--ink);
	font: 400 .74rem/1 var(--display);
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .25s;
}
.nav a:hover { color: var(--gold); }
/* The phone number is data, not a label — set it in the body face so the
   digits stay unambiguous (Marcellus's 1 reads as an I at small sizes).
   Selector is qualified to outweigh `.nav a` above. */
.nav a.nav__tel {
	color: var(--gold);
	font: 400 .88rem/1 var(--body);
	letter-spacing: .04em;
	text-transform: none;
	font-variant-numeric: lining-nums tabular-nums;
}

.nav-toggle {
	display: none;
	width: 42px; height: 42px;
	padding: 0; border: 1px solid var(--hair-soft); background: transparent;
	color: var(--ink); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
	display: block; width: 18px; height: 1px; background: currentColor;
	margin-inline: auto; transition: transform .3s, opacity .3s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-top: clamp(2.5rem, 6vw, 5rem); }

.hero__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.hero__mark {
	margin: 1.1rem 0 0;
	font: 400 clamp(2.6rem, 1.2rem + 6.2vw, 5.4rem)/1.04 var(--display);
	letter-spacing: .15em;
	text-transform: uppercase;
}
.hero__line { display: block; }
.hero__line--gold { color: var(--gold); }

.hero__rule { margin-top: clamp(1.25rem, 2.4vw, 2rem); max-width: 220px; }
.hero__lede { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }

.hero__actions {
	display: flex; flex-wrap: wrap; gap: .85rem;
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

/* --- Hallmark bar -------------------------------------------------------- */

.hallmarks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: clamp(3rem, 7vw, 5.5rem) 0 0;
	padding: 0;
	border-top: 1px solid var(--hair-soft);
	border-bottom: 1px solid var(--hair-soft);
	list-style: none;
}
.hallmarks__item {
	padding: 1.35rem 1.25rem;
	text-align: center;
	font: 400 .7rem/1.5 var(--display);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.hallmarks__item + .hallmarks__item { border-left: 1px solid var(--hair-soft); }

/* --- Sections ------------------------------------------------------------ */

.section { padding-block: var(--bay); }
.section--lift { background: var(--ground-lift); }

.section__head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* --- Catalog ------------------------------------------------------------- */

.cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0; padding: 0;
	list-style: none;
}

/* The gender tiles are a short, deliberate pair, not a full grid. The base
   rule's 1fr tracks are what a many-tile listing wants - grow to fill the
   row - but with only two tiles they stretch across however many columns
   auto-fill fits at the viewport width, leaving the pair left-aligned with
   dead space on the right instead of centered. Fixed-width auto-fit tracks
   collapse the unused columns instead of stretching into them, and
   justify-content centers what's left. */
.cats--gender {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 265px));
	justify-content: center;
}

.cat__frame { --cut: 18px; }
.cat__frame > img { aspect-ratio: 4 / 5; object-fit: cover; }

.cat__body {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: .35rem 1rem;
	margin-top: 1.1rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--hair-soft);
}
.cat__name {
	grid-column: 1;
	margin: 0;
	font: 400 1.0625rem/1.3 var(--display);
	letter-spacing: .07em;
}
.cat__mark { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; font-size: .625rem; }
.cat__note {
	grid-column: 1 / -1;
	margin: 0;
	font-weight: 300; font-size: .94rem;
	color: var(--ink-soft);
}

/* --- Brand sheets -------------------------------------------------------- */

.brands {
	margin-top: clamp(3.5rem, 7vw, 5.5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--hair-soft);
}
.brands__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); color: var(--ink-soft); }
.brands__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
.brands__sheet { margin: 0; }
.brands__label {
	margin-bottom: 1.1rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--hair-soft);
}
/* The sheets carry real alpha: pale marks on a transparent ground, so they sit
   on the page directly.

   They did not always. They arrived as dark artwork on solid white, and the
   white was hidden by inverting it to black and then screening the black away
   against the section - which meant the section's own background had to be
   inside the blend's group for the trick to work at all. That made it fragile
   in both directions: the un-blended image painted black for a frame before
   the blend resolved, and isolating the grid to try to fix the flash removed
   the green from the group and left the black permanently. Converting the two
   files to alpha deletes the whole mechanism rather than tuning it.

   Their colour was baked pale, for a dark page. On stone that would all but
   vanish, so brightness(0) collapses the baked colour to black and leaves the
   alpha untouched; the opacity below then settles it to roughly the weight of
   --ink-soft, which is where these marks belong. The files need no
   regeneration — only their colour was theme-bound, and that is decided here
   now. Alpha is the inverted luminance of the original artwork, so the ground
   drops out and the antialiased edges keep their coverage. */
.brands__sheet img {
	width: 100%;
	/* Keeps the ratio, now that the markup declares real width and height.
	   Those attributes are what let the browser reserve space before the file
	   arrives; without them this section laid out collapsed and reflowed on
	   load. */
	height: auto;
	/* Brand marks belong to other companies and should not compete with the
	   shop's own type. */
	filter: brightness(0);
	opacity: .55;
}

/* --- Selected mosaic ----------------------------------------------------- */

.mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(.75rem, 1.6vw, 1.25rem);
	margin: 0; padding: 0;
	list-style: none;
}
.mosaic__cell--wide { grid-column: span 2; }

.piece {
	width: 100%;
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
}
.piece > img {
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.mosaic__cell--wide .piece > img { aspect-ratio: 2 / 1; }
.piece:hover > img { transform: scale(1.035); }

/* --- Workshop ------------------------------------------------------------ */

.workshop {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}
.workshop__p {
	max-width: 52ch;
	margin: 1.25rem 0 0;
	font-weight: 300;
	color: var(--ink-soft);
}
.workshop__figure > img { aspect-ratio: 4 / 5; object-fit: cover; }

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

.contact {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}

.facts { margin: 0; display: grid; gap: 0; }
.facts dt { margin-bottom: .4rem; }
.facts dd {
	margin: 0 0 1.75rem;
	font-weight: 300;
	color: var(--ink);
}
.facts dd:last-child { margin-bottom: 0; }
.facts__line { display: block; color: var(--ink-soft); }
.facts__day { color: var(--ink); }

.field { margin-bottom: 1.5rem; }
.field label { display: block; margin-bottom: .5rem; }
.field input,
.field textarea {
	width: 100%;
	padding: .8rem 0;
	border: 0;
	border-bottom: 1px solid var(--hair);
	background: transparent;
	color: var(--ink);
	font: 400 1rem/1.6 var(--body);
	transition: border-color .25s;
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus {
	outline: none;
	border-bottom-color: var(--gold);
}

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.status {
	margin: 0 0 1.75rem;
	padding: .9rem 1.1rem;
	border-left: 2px solid var(--gold);
	background: rgba(116, 88, 33, .10);
	font-weight: 300;
}
.status--err { border-left-color: #A8443A; background: rgba(168, 68, 58, .10); color: #8C2F26; }

.maps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(1rem, 2.4vw, 1.75rem);
	margin-top: clamp(3rem, 6vw, 4.5rem);
}
/* The map is left in Google's own colours on purpose. Visitors scan for the
   map they already recognise, so the emerald-cut frame carries the design and
   the map itself stays familiar. */
.maps__item { margin: 0; }
.maps__frame > iframe {
	width: 100%;
	height: 280px;
	border: 0;
}
.maps__cap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-top: 1rem;
}
.maps__addr { font-weight: 300; color: var(--ink); }
.maps__link { font-size: .9rem; white-space: nowrap; }

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

/* The one dark band on a light page. Rather than restate a light colour on
   every child, the footer redefines the ink and gold tokens for its own
   subtree — the rules below are the same ones the rest of the page uses, and
   they invert here by scope alone. --gold-line is the decorative gold that is
   unreadable on stone but clears AA (6.4:1) on emerald, so it becomes the
   footer's working gold. */
.site-foot {
	--ink: #E6E3D9;
	--ink-soft: #9DB0A7;
	--gold: var(--gold-line);
	--hair-soft: rgba(201, 163, 92, .20);

	padding-block: clamp(3rem, 6vw, 4.5rem);
	background: var(--emerald);
	color: var(--ink);
	border-top: 1px solid var(--hair-soft);
}
.site-foot__in {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 2rem;
}
.site-foot__brand { display: grid; justify-items: start; gap: .5rem; }
.site-foot__brand .diamond { width: 34px; height: 27px; }
.site-foot__name {
	margin: 0;
	font: 400 .95rem/1 var(--display);
	letter-spacing: .18em;
	text-transform: uppercase;
}
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 1.75rem; justify-content: center; }
.site-foot__nav a {
	color: var(--ink-soft);
	font: 400 .72rem/1 var(--display);
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .25s;
}
.site-foot__nav a:hover { color: var(--gold); }
.site-foot__copy {
	margin: 0;
	font-size: .82rem;
	font-weight: 300;
	color: var(--ink-soft);
	text-align: right;
}

/* --- Lightbox ------------------------------------------------------------ */

.lightbox {
	width: min(94vw, 1100px);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: 1px solid var(--hair);
	background: var(--surface);
	color: var(--ink);
	overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(22, 33, 29, .82); }
.lightbox__img { width: 100%; max-height: 92vh; object-fit: contain; }
.lightbox__close {
	position: absolute; top: .5rem; right: .75rem; z-index: 2;
	width: 40px; height: 40px;
	border: 1px solid var(--hair-soft);
	background: rgba(255, 255, 255, .82);
	color: var(--ink);
	font-size: 1.5rem; line-height: 1;
	cursor: pointer;
	transition: color .25s, border-color .25s;
}
.lightbox__close:hover { color: var(--gold); border-color: var(--gold); }

/* --- Reveal on scroll ---------------------------------------------------- */

.js .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Hero settles once on load. */
@keyframes rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
@keyframes sheen {
	from { transform: translateX(-130%); }
	to { transform: translateX(130%); }
}
.js .hero__eyebrow,
.js .hero__mark,
.js .hero__rule,
.js .hero__lede,
.js .hero__actions,
.js .hero__stone { animation: rise .95s cubic-bezier(.22, .61, .36, 1) backwards; }
.js .hero__eyebrow { animation-delay: .05s; }
.js .hero__mark    { animation-delay: .15s; }
.js .hero__rule    { animation-delay: .3s; }
.js .hero__lede    { animation-delay: .38s; }
.js .hero__actions { animation-delay: .48s; }
.js .hero__stone   { animation-delay: .22s; }
.js .hero__stone .stone__line::after { animation: sheen 1.5s cubic-bezier(.22, .61, .36, 1) 1s backwards; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
	.hero__in { grid-template-columns: 1fr; }
	.hero__stone { order: -1; }
	.workshop { grid-template-columns: 1fr; }
	.contact { grid-template-columns: 1fr; }
	.hallmarks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hallmarks__item:nth-child(3) { border-left: 0; }
	.hallmarks__item:nth-child(n + 3) { border-top: 1px solid var(--hair-soft); }
	.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.nav-toggle { display: block; }
	.nav {
		position: absolute; left: 0; right: 0; top: 100%;
		display: grid; gap: 0;
		padding: 0 var(--gutter);
		background: var(--ground);
		border-bottom: 1px solid var(--hair-soft);
		max-height: 0; overflow: hidden;
		transition: max-height .35s ease;
	}
	.nav a { padding: 1rem 0; border-bottom: 1px solid var(--hair-soft); }
	.nav a:last-child { border-bottom: 0; }
	.nav.is-open { max-height: 320px; }

	.site-foot__in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.site-foot__brand { justify-items: center; }
	.site-foot__copy { text-align: center; }
}

@media (max-width: 560px) {
	.hallmarks { grid-template-columns: 1fr; }
	.hallmarks__item + .hallmarks__item { border-left: 0; border-top: 1px solid var(--hair-soft); }
	.mosaic { grid-template-columns: 1fr; }
	.mosaic__cell--wide { grid-column: span 1; }
	.mosaic__cell--wide .piece > img { aspect-ratio: 3 / 2; }
	.hero__actions .btn { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .reveal { opacity: 1; transform: none; transition: none; }
	.js .hero__eyebrow, .js .hero__mark, .js .hero__rule,
	.js .hero__lede, .js .hero__actions, .js .hero__stone { animation: none; }
	.js .hero__stone .stone__line::after { animation: none; }
	.cut::after, .stone:hover .stone__line::after { transition: none; }
	.piece > img { transition: none; }
	.piece:hover > img { transform: none; }
}

/* Catalog tiles became links in Phase 3. The whole tile is the target rather
   than just the name: it is a large touch target on a phone, which is what
   people will actually tap. */
.cat__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.cat__link:hover .cat__name,
.cat__link:focus-visible .cat__name {
	color: var(--gold);
}

.cat__link:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 4px;
}