/* ---- Web fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@600;700&display=swap');

@charset "utf-8";

/* ---- Base / tokens ---- */
:root{
	--maxw:1100px;
	--gap:1.25rem;
	--bg:#ffffff;
	--ink:#111111;
	--muted:#666;
	--primary:#D60000;             /* links / accents */
	--border:#e6e6e6;
	--soft:#fafafa;
	--radius:14px;
	color-scheme: light;
}

*{box-sizing:border-box}
html{
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
	scroll-behavior:smooth;
}
body{
	margin:0;
	background: var(--bg) url(images/back1.jpg) repeat-x top;
	color: var(--ink);
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-size:16px;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* ---- Typography ---- */
h1,h2,h3{
	font-family:'Poppins','Open Sans',Arial,Helvetica,sans-serif;
	font-weight:700;
	letter-spacing:.2px;
	margin:.25em 0 .5em;
}
h1{ font-size:clamp(24px,3.2vw,36px); line-height:1.2; }
h2{ font-size:clamp(20px,2.2vw,28px); }
h3{ font-size:clamp(18px,2vw,22px); }

p{ margin:0 0 1rem; color:var(--ink); }
small, .muted{ color:var(--muted); }

/* ---- Links ---- */
a{ color:var(--primary); text-decoration:none; }
a:hover, a:focus-visible{ text-decoration:underline; }
a:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---- Language flags ---- */
#languages{
	position:absolute; right:10px; top:10px; width:auto;
	display:flex; gap:.5rem; align-items:center;
	padding:.25rem .5rem; background:rgba(255,255,255,.7); border-radius:999px;
}
#languages img{ vertical-align:middle; display:block }

/* ---- Header ---- */
.header{
	display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center;
	max-width:var(--maxw); margin:0 auto; padding:1rem var(--gap);
}
.header .brand img{ max-height:90px; height:auto; display:block; }
.right2{
	width:100%;
	min-height:180px;
	background:url(images/cam.png) no-repeat right bottom / auto 80%;
	padding:12px 0 0 0;
}
.right2 span{ color:#E00000; }

/* ---- Top nav (pills) ---- */
#content{ background: none; }
#men{
	max-width:var(--maxw); margin:.25rem auto 1rem; padding:0 var(--gap);
	display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
	text-shadow:none;
}
#men a.round{
	border:1px solid var(--border); border-radius:999px;
	padding:.55rem 1rem; color:#000; background:#fff;
	line-height:1; height:auto; display:inline-flex; align-items:center;
	transition:background .15s ease,border-color .15s ease,color .15s ease, transform .06s ease;
}
#men a.round ins{
	background:none; padding:0; color:inherit; text-decoration:none;
}
#men a.round:hover{ background:#111; color:#fff; border-color:#111; transform:translateY(-1px); }
#men a.round:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---- Main content ---- */
#content2{
	max-width:var(--maxw); margin:0 auto; padding:0 var(--gap) 2rem;
}
.note{
	background:var(--soft); border:1px dashed var(--border);
	border-radius:var(--radius); padding:1rem; margin:1rem 0;
}

/* ---- Media / figure ---- */
figure{ text-align:center; margin:1rem 0; }
figcaption{ font-weight:700; margin:.5rem 0 1rem; }
img.responsive{ max-width:100%; height:auto; }

/* ---- Footer ---- */
#footer{
	text-align:center; max-width:var(--maxw);
	margin:0 auto 2rem; padding:0 var(--gap);
}
#footer nav a{ display:inline-block; margin:.2rem .35rem; }

/* ---- Utilities ---- */
.visually-hidden{
	position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 900px){
	body{ font-size:15px; line-height:1.6; }
	#languages{ position:static; margin: .5rem var(--gap) 0; background:#fff; }
	.header{ grid-template-columns:1fr; }
	.right2{ min-height:unset; background-size:auto 60%; }
	h1{ font-size:clamp(22px,5vw,30px); }
}
@media (max-width:600px){
	#men{ gap:.4rem; }
	#men a.round{ padding:.6rem .9rem; font-size:15px; }
	.right2{ background-size:auto 48%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	#men a.round{ transition:none; }
}