/* =========================================================
 Global base
 Fluid-but-capped layout, safe-area gutters, and utilities
 ========================================================= */

/* ---- Layout tokens (global) ---- */
:root{
	--site-max: 1280px;                 /* default content cap */
	--site-wide: 1600px;                /* wider sections (hero, galleries) */
	--page-pad-x: clamp(16px, 4vw, 40px);
	--page-pad-y: clamp(12px, 2.5vw, 28px);
	--sidebar-w: 280px;                 /* global sidebar width */
	--grid-gap: 22px;
}

/* ---- Resets & typography ---- */
html,body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system, system-ui, Segoe UI, Roboto, sans-serif;
}

.container--bleed{
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 0;
	padding-right: 0;
}

/* Respect iPhone safe areas */
body{
	padding-left:  env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

a{ color:var(--brand); text-decoration:none; }

/* ---- Global container (style: fluid but capped) ---- */
.container{
	width:100%;
	max-width:var(--site-max);
	margin-inline:auto;
	padding-inline:var(--page-pad-x);
	padding-block: var(--page-pad-y);
	box-sizing:border-box;
}

.container--xl{
	max-width: 1600px;        /* 1440–1600 is fine; pick one */
	margin: 0 auto;
	padding: 32px var(--site-gutter);
}

/* Wider sections when needed */
.container--wide{ max-width:var(--site-wide); }

/* Tight variant (optional) */
.container.is-tight{ padding-block: clamp(6px,1.2vw,14px); }
/* Match hero max-width for post/article shells */
.container.is-hero{ max-width: var(--container); }

/* ---- Universal grid helpers ---- */
.grid{ display:grid; gap:var(--grid-gap); }
/* Fixed column count helpers (desktop-first) */
.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

/* Collapse grids progressively on smaller screens */
@media (max-width: 1024px){
	.cols-4{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px){
	.cols-3, .cols-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
	.cols-2, .cols-3, .cols-4{ grid-template-columns:1fr; }
}

/* ---- Global post shell (sidebar + content) ----
 Use: <div class="container post-shell"><aside class="sidebar">…</aside><section>…</section></div>
 */
.container.post-shell{
	display:grid;
	grid-template-columns: var(--sidebar-w) minmax(0,1fr);
	column-gap: clamp(22px, 2.5vw, 36px);
	align-items:start;
}

/* Sidebar layout behavior everywhere */
.sidebar{
	position: sticky;
	top: calc(var(--header-h, 88px) + 16px); /* sits under header */
	margin-left: -30px;
	margin-top: -35px;     /* default nudge to align in most shells */
}

/* Blog landing: align Archive box top with "Blog" heading */
.blog-shell .sidebar{
	margin-top: -80px;
}

/* Stack for mobile */
@media (max-width: 860px){
	.container.post-shell{
		grid-template-columns:1fr;
	}
	.sidebar{
		position: static;
		order:-1;                 /* sidebar above content on mobile */
		margin-bottom:16px;
	}
}

/* ---- Sensible global media defaults ---- */
img, video, canvas{
	max-width:100%;
	height:auto;
	display:block;
}

/* Optional: keep heroes aligned to the wide container cap */
.hero-card{
	max-width:var(--site-wide);
	margin-inline:auto;
	padding-inline:var(--page-pad-x);
	box-sizing:border-box;
}

/* ---- Utilities ---- */
.u-muted{ color:var(--muted); }
.u-center{ text-align:center; }
.u-glow-red{ box-shadow:var(--glow-red); }
.u-shadow{ box-shadow:var(--shadow-sm); }
.u-radius{ border-radius:var(--radius); }
.u-space-3p{ margin-top: 3.15rem; }
.lead{ font-size: clamp(1.2rem, 2.8vw, 1.7rem); line-height: 1.5; letter-spacing: .01em; }
.container.is-tight .lead{ margin-top: .25rem; }
.dropcap::first-letter {
	float: left;
	font-size: 3em;
	line-height: 1;
	margin-right: 0.1em;
}

/* ---- Display heading polish ---- */
.display-title{
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0 0 clamp(6px, 1.2vw, 14px) 0;
}

/* Section heading variant for consistency with display title */
.section-title{
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin-top: clamp(14px, 2.2vw, 28px);
  margin-bottom: clamp(14px, 2.4vw, 26px);
}

/* ---- Reduced motion support ---- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
  .card, .card-news, .site-header, .hero-card{ box-shadow: none; }
}

/* A11y: screen reader text helper */
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}