/* ---------------------------------------------------------------------------
   The entry page.
   A full-bleed panorama, a short statement, then a grid of routes.
   Colours come from tokens so the page follows whatever Novo is doing
   rather than fighting it, and reads correctly in a dark browser too.
   --------------------------------------------------------------------------- */

.bv-home{
	/* Pinned dark, deliberately. Photographs sit better on a dark ground,
	   and the page then looks the same for every visitor rather than
	   flipping with whatever their machine is set to. */
	--bv-ink:#eceae6;
	--bv-ink-soft:#9aa0a6;
	--bv-ground:#0f1113;
	--bv-panel:#171a1d;
	--bv-rule:#2a2e33;
	--bv-accent:#79b8d4;
	--bv-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
	color:var(--bv-ink);
	background:var(--bv-ground);
	color-scheme:dark;
}

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

/* ---- the panorama ----
   The height clamp(180px,34vw,420px) is repeated in front-page.php
   (bv_home_hero), which tells the browser how wide the picture is drawn
   so it can pick the right copy. Change both together. (1.9.7) */
.bv-hero{position:relative;margin:0}
.bv-hero img{
	display:block;
	width:100%;
	height:clamp(180px,34vw,420px);
	object-fit:cover;
	max-width:100%;
}
.bv-hero-mark{
	position:absolute; left:0; right:0; bottom:0;
	padding:16px;
	background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
}
.bv-hero-mark > span{display:block;max-width:1180px;margin:0 auto;padding-inline:16px;color:#fff}
.bv-brand{
	display:block;
	font-family:var(--bv-display);
	font-weight:300;
	font-size:clamp(2rem,6vw,3.6rem);
	letter-spacing:.14em;
	line-height:1;
}
.bv-tagline{
	display:block;
	font-size:.68rem;
	font-weight:500;
	letter-spacing:.22em;
	text-transform:uppercase;
	opacity:.9;
	margin-top:.5rem;
}

/* ---- the statement ---- */
.bv-statement{max-width:60ch;margin:clamp(32px,5vw,56px) auto clamp(8px,2vw,20px);text-align:center}
.bv-statement p{
	font-family:var(--bv-display);
	font-size:clamp(1.15rem,2.4vw,1.5rem);
	line-height:1.5;
	margin:0;
	text-wrap:balance;
}
.bv-notice{
	display:inline-block;
	margin-top:1.6rem;
	padding:.55rem 1.1rem;
	border:1px solid var(--bv-rule);
	border-radius:3px;
	background:var(--bv-panel);
	font-size:.88rem;
	line-height:1.5;
	text-wrap:balance;
}
.bv-notice b{
	font-size:.68rem;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--bv-accent);
}
.bv-notice a{color:var(--bv-ink);font-weight:500}

/* ---- the routes ---- */
.bv-sec{
	font-size:.7rem;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--bv-ink-soft);
	margin:clamp(36px,5vw,56px) 0 14px;
}
/* Three across, and three across only.
   Nine photographs in a 3x3 is the composition, not a consequence of the
   window being a certain width: a fourth column would re-order the reading
   and leave a widow on the last row. So the column count is fixed and the
   tiles grow with the page instead of multiplying.
   Two across on a tablet, one on a phone -- 3x3 does not survive 400px. */
.bv-grid{
	display:grid;
	gap:14px;
	grid-template-columns:repeat(3,minmax(0,1fr));
	margin-bottom:clamp(40px,6vw,72px);
}
@media (max-width:860px){
	.bv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
	.bv-grid{ grid-template-columns:minmax(0,1fr); }
}
.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-tile img,
.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-tile:hover img,
.bv-tile:focus-visible img{transform:scale(1.03)}
.bv-tile-body{display:block;padding:12px 14px 14px}
.bv-tile-name{display:block;font-family:var(--bv-display);font-size:1.5rem;line-height:1.1}
.bv-tile-meta{
	display:block;
	font-size:.78rem;
	color:var(--bv-ink-soft);
	margin-top:.2rem;
	font-variant-numeric:tabular-nums;
}
.bv-tile:focus-visible{outline:2px solid var(--bv-accent);outline-offset:2px}

/* ---- the foot ---- */
.bv-home-foot{
	display:flex;
	flex-wrap:wrap;
	gap:10px 24px;
	justify-content:space-between;
	border-top:1px solid var(--bv-rule);
	padding:20px 0 40px;
	color:var(--bv-ink-soft);
	font-size:.82rem;
}

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

/* a tile whose page has not been made yet */
.bv-tile-soon{cursor:default}
.bv-tile-soon img{opacity:.72}
.bv-tile-soon .bv-tile-meta{color:var(--bv-accent)}