/* ---------------------------------------------------------------------------
   Group landing pages.

   The same geometry as the entry page -- three across, the same tile
   proportion, the same display face -- so the two read as one family. The
   difference is colour: the entry page is pinned dark on purpose, because it
   is the whole window. A landing page sits between Novo's header and Novo's
   footer, so it takes its colours from tokens and follows whatever the theme
   and the visitor's machine are doing instead of fighting them.
   --------------------------------------------------------------------------- */

.bv-group{
	--bv-ink:#23201d;
	--bv-ink-soft:#6b645d;
	--bv-panel:#fff;
	--bv-rule:#e5e0d8;
	--bv-accent:#8a5a2b;
	--bv-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
	color:var(--bv-ink);
}
@media (prefers-color-scheme:dark){
	.bv-group:not([data-theme="light"]){
		--bv-ink:#ece8e3;
		--bv-ink-soft:#a49d95;
		--bv-panel:#201f24;
		--bv-rule:#34323a;
		--bv-accent:#d9a066;
	}
}
/* v1.7.0: the site itself is dark (Novo: body.site-dark) -- follow it,
   whatever the visitor's machine is set to. */
.site-dark .bv-group:not([data-theme="light"]),
.bv-group[data-theme="dark"]{
	--bv-ink:#ece8e3;
	--bv-ink-soft:#a49d95;
	--bv-panel:#201f24;
	--bv-rule:#34323a;
	--bv-accent:#d9a066;
}

.bv-group *{box-sizing:border-box}
.bv-group-wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

/* Three across, and three across only -- the entry page's reasoning, kept.
   Two on a tablet, one on a phone. */
.bv-group .bv-grid{
	display:grid;
	gap:14px;
	grid-template-columns:repeat(3,minmax(0,1fr));
	margin:0 0 clamp(24px,4vw,40px);
}
@media (max-width:860px){
	.bv-group .bv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
	.bv-group .bv-grid{ grid-template-columns:minmax(0,1fr); }
}

.bv-group .bv-tile{
	position:relative;
	display:block;
	text-decoration:none;
	color:inherit;
	border:1px solid var(--bv-rule);
	border-radius:3px;
	overflow:hidden;
	background:var(--bv-panel);
	min-width:0;
}
.bv-group .bv-tile img,
.bv-group .bv-tile-noimg{
	display:block;
	width:100%;
	aspect-ratio:19/14;
	object-fit:cover;
	max-width:100%;
	background:var(--bv-rule);
	transition:transform .5s ease;
}
.bv-group .bv-tile:hover img,
.bv-group .bv-tile:focus-visible img{transform:scale(1.03)}
.bv-group .bv-tile:focus-visible{outline:2px solid var(--bv-accent);outline-offset:2px}

.bv-group .bv-tile-body{display:block;padding:12px 14px 14px}
.bv-group .bv-tile-name{
	display:block;
	font-family:var(--bv-display);
	font-size:1.45rem;
	line-height:1.15;
	text-wrap:balance;
}
.bv-group .bv-tile-meta{
	display:block;
	font-size:.78rem;
	color:var(--bv-ink-soft);
	margin-top:.2rem;
	font-variant-numeric:tabular-nums;
}

/* A tile that leaves the site (v1.5.5): a small arrow after the name. */
.bv-group .bv-tile-out .bv-tile-name::after{
	content:"\2009\2197";
	font-size:.7em;
	color:var(--bv-ink-soft);
}

.bv-group-foot{
	border-top:1px solid var(--bv-rule);
	padding-top:16px;
	margin:0 0 8px;
	color:var(--bv-ink-soft);
	font-size:.82rem;
	font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){
	.bv-group .bv-tile img{transition:none}
}


/* ---------------------------------------------------------------------------
   "What I use" — the kit list on Equipment, under its tiles.        v1.6.0

   Three columns side by side (Cameras, Lenses, Tripods & Filters), one on a
   phone. Same tokens as the tiles, so it follows the same light/dark rules.
   Links carry no underline (Mark, 15 October): they take the ink colour and
   brighten to the accent on hover and keyboard focus.
   --------------------------------------------------------------------------- */
.bv-kit-wrap{
	--bv-ink:#23201d; --bv-ink-soft:#6b645d; --bv-rule:#e5e0d8; --bv-accent:#8a5a2b;
	--bv-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
	max-width:1180px; margin:clamp(8px,2vw,24px) auto 0; padding-inline:16px; color:var(--bv-ink);
}
@media (prefers-color-scheme:dark){
	.bv-kit-wrap:not([data-theme="light"]){ --bv-ink:#ece8e3; --bv-ink-soft:#a49d95; --bv-rule:#34323a; --bv-accent:#d9a066; }
}
.site-dark .bv-kit-wrap:not([data-theme="light"]){ --bv-ink:#ece8e3; --bv-ink-soft:#a49d95; --bv-rule:#34323a; --bv-accent:#d9a066; }   /* v1.7.0 */
.bv-kit-wrap h2{
	font-family:var(--bv-display); font-weight:400; font-size:clamp(1.6rem,3vw,2.1rem);
	margin:0 0 .3em; border-top:1px solid var(--bv-rule); padding-top:clamp(18px,3vw,28px);
}
.bv-kit-wrap > p{ color:var(--bv-ink-soft); margin:0 0 1.2em; max-width:70ch; }
.bv-kit{ display:grid; gap:clamp(18px,3vw,36px); grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:860px){ .bv-kit{ grid-template-columns:minmax(0,1fr); } }
.bv-kit h3{
	font-family:var(--bv-display); font-weight:400; font-size:1.35rem;
	margin:0 0 .5em; padding-bottom:.35em; border-bottom:1px solid var(--bv-rule);
}
.bv-kit ul{ list-style:none; margin:0; padding:0; }
.bv-kit li{ margin:0 0 .45em; line-height:1.35; }
.bv-kit a{ color:inherit; text-decoration:none; border:0; box-shadow:none; }
.bv-kit a:hover, .bv-kit a:focus-visible{ color:var(--bv-accent); }
.bv-kit a:focus-visible{ outline:2px solid var(--bv-accent); outline-offset:2px; }
.bv-kit .bv-kit-old, .bv-kit .bv-kit-old a{ color:var(--bv-ink-soft); }