/* =========================================================
   Kewkradong — base styles
   Placeholder brand values below (colors also come from
   Theme Options as CSS vars — see functions.php). Swap fonts
   and colors here once real brand assets are ready.
========================================================= */

:root{
	--kwk-primary: #1F3A3D;      /* dark teal overlay */
	--kwk-primary-rgb: 31,58,61;
	--kwk-accent: #6FA8C9;       /* Sky / Glacier Blue */
	--kwk-ink: #14201F;
	--kwk-paper: #F6F4EF;        /* warm off-white */
	--kwk-white: #FFFFFF;

	--kwk-font-display: 'Playfair Display', Georgia, serif;
	--kwk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--kwk-container: 1520px;
	--kwk-gutter: 200px; /* matches the 200px side margins in the mockup */
	--kwk-gutter-mobile: 24px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin: 0;
	font-family: var(--kwk-font-body);
	color: var(--kwk-ink);
	background: var(--kwk-paper);
	line-height: 1.6;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
h1, h2, h3{ font-family: var(--kwk-font-display); margin: 0 0 .5em; line-height: 1.15; }

.screen-reader-text{
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0,0,0,0); border: 0;
}

/* -------------------- Shared icon -------------------- */
.kwk-icon-circle{
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%;
	font-size: 18px;
}

/* -------------------- Solid header (interior pages) --------------------
   Fixed to the top and scroll-aware, matching the Prothom Alo-style
   behavior: shrinks (and freezes) once the page scrolls past a small
   threshold, then slides fully out of view on further downward scroll so
   it doesn't eat reading space — and snaps back the moment the user
   scrolls up, even slightly. See main.js for the scroll handler that
   toggles .is-compact / .is-unpinned on #site-header. */
:root{
	--kwk-header-bottom: 78px;  /* logo + nav row — always visible, height never changes */
	--kwk-header-top-max: 88px; /* featured-strip row's height when expanded */
	--kwk-header-tall: calc(var(--kwk-header-bottom) + var(--kwk-header-top-max));
	--kwk-header-short: var(--kwk-header-bottom);
}
.site-header--solid{
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	height: var(--kwk-header-tall);
	display: flex;
	flex-direction: column;
	background: var(--kwk-primary);
	color: var(--kwk-white);
	transition: height .35s cubic-bezier(.4,0,.2,1),
	            box-shadow .35s ease,
	            transform .35s cubic-bezier(.4,0,.2,1);
}
.site-header--solid.is-compact{
	height: var(--kwk-header-short);
	box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.site-header--solid.is-unpinned{
	transform: translateY(-100%);
}

/* ---- row 1: featured strip (3 latest posts, collapses away when compact) ---- */
.site-header__featured{
	flex: 0 0 auto;
	max-width: var(--kwk-container);
	width: 100%;
	margin: 0 auto;
	display: flex;
	gap: 24px;
	justify-content: flex-end;
	max-height: var(--kwk-header-top-max);
	opacity: 1;
	overflow: hidden;
	padding: 14px var(--kwk-gutter-mobile) 10px;
	transition: max-height .35s cubic-bezier(.4,0,.2,1),
	            opacity .25s ease,
	            padding .35s cubic-bezier(.4,0,.2,1);
}
.site-header--solid.is-compact .site-header__featured{
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: none;
}
.site-header__featured-item{
	display: flex; align-items: center; gap: 10px;
	max-width: 220px; min-width: 0;
}
.site-header__featured-thumb{
	width: 44px; height: 44px; flex-shrink: 0;
	object-fit: cover; border-radius: 2px;
}
.site-header__featured-text{
	display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.site-header__featured-kicker{
	font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--kwk-accent);
}
.site-header__featured-title{
	font-size: 12.5px; line-height: 1.35; font-weight: 500;
	color: rgba(255,255,255,.88);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .25s ease;
}
.site-header__featured-item:hover .site-header__featured-title{ color: var(--kwk-white); }

/* ---- row 2: logo + nav (always visible, fixed height) ---- */
.site-header__inner{
	width: 100%;
	max-width: var(--kwk-container);
	height: var(--kwk-header-bottom);
	flex: 0 0 auto;
	margin: 0 auto;
	padding: 0 var(--kwk-gutter-mobile);
	display: flex; align-items: center; justify-content: space-between;
}
.site-logo img{
	height: 52px;
	transition: height .35s cubic-bezier(.4,0,.2,1);
}
.site-header--solid.is-compact .site-logo img{ height: 38px; }

/* Holds the flow-space the fixed header would otherwise vacate; shrinks
   in step with the header so content doesn't jump. */
.site-header-spacer{
	height: var(--kwk-header-tall);
	transition: height .35s cubic-bezier(.4,0,.2,1);
}
.site-header-spacer.is-compact{
	height: var(--kwk-header-short);
}

/* Featured strip is desktop-only real estate — 3 thumbnailed items don't
   fit alongside the logo/nav on narrow screens, so it's dropped entirely
   rather than squeezed; the header simply behaves as logo+nav there. */
@media (max-width: 900px){
	.site-header__featured{ display: none; }
	:root{ --kwk-header-tall: var(--kwk-header-bottom); }
}

/* -------------------- Nav -------------------- */
.site-nav__list{
	list-style: none; display: flex; gap: 28px; margin: 0; padding: 0;
	font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
}
/* Accent-colored text on hover + an underline that grows in from the
   left, same accent used for kickers elsewhere on the site. */
.site-nav__list a{
	position: relative;
	display: inline-block;
	padding: 4px 0;
	transition: color .25s ease;
}
.site-nav__list a::after{
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 0%;
	height: 1.5px;
	background: var(--kwk-accent);
	transition: width .25s ease;
}
.site-nav__list a:hover{
	color: var(--kwk-accent);
}
.site-nav__list a:hover::after{
	width: 100%;
}

/* ---- Dropdown submenus (ICC -> St. Martin's Island / Cox's Bazar / ...,
   or any nested item in a custom Appearance -> Menus "primary" menu) ----
   Works against both nav.php's own taxonomy-parent/child loop and
   WordPress's default wp_nav_menu() output, since both use the same
   li.menu-item-has-children / ul.sub-menu markup. */
.site-nav__list li{ position: relative; }
/* Horizontal padding + a canceling negative margin, so the hover
   highlight below gets breathing room without shifting the nav's overall
   letter-spacing/gap rhythm for the other (non-dropdown) links. */
.site-nav__list li.menu-item-has-children > a{
	padding: 4px 8px;
	margin: 0 -8px;
	border-radius: 3px;
	transition: color .25s ease, background .2s ease;
}
.site-nav__list li.menu-item-has-children > a::after{
	content: "▾";
	display: inline-block;
	margin-left: 5px;
	font-size: 10px;
	vertical-align: 1px;
}
/* No underline on has-children items — the whole-tab background
   highlight below is already the "this one's open" signal, a second
   accent-colored underline on top of it would be redundant and clash. */
.site-nav__list .sub-menu{
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: rgba(20,32,31,.5); /* --kwk-ink @ 50% opacity */
	box-shadow: 0 12px 28px rgba(0,0,0,.35);
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 10;
}
.site-nav__list li.menu-item-has-children:hover > .sub-menu,
.site-nav__list li.menu-item-has-children:focus-within > .sub-menu{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Highlight the parent link's whole tab while its dropdown is open — a
   lighter shade of the site's own dark teal (not the red accent), so it
   reads as "this panel lit up" rather than introducing a new color. */
.site-nav__list li.menu-item-has-children:hover > a,
.site-nav__list li.menu-item-has-children:focus-within > a{
	color: var(--kwk-white);
	background: rgba(var(--kwk-primary-rgb), .8);
}
.site-nav__list .sub-menu li{ display: block; }
.site-nav__list .sub-menu a{
	display: block;
	padding: 10px 18px;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: rgba(255,255,255,.82);
}
.site-nav__list .sub-menu a::after{ display: none; } /* no underline inside the dropdown, use a background tint instead */
.site-nav__list .sub-menu a:hover{
	color: var(--kwk-white);
	background: rgba(var(--kwk-primary-rgb), .8);
}

.site-nav__toggle{ display: none; }

/* -------------------- Hero -------------------- */
.kwk-hero{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 100vh;
	color: var(--kwk-white);
	/* On a narrow phone, 16:9 only gives ~210px of height to fit the
	   overlaid logo + kicker + title + excerpt into — nowhere near enough
	   once a title runs long and wraps 3-4 lines, which is what caused
	   the logo/text overlap. min-height only kicks in when the aspect-
	   ratio height would be smaller than this (i.e. narrow screens); on
	   wider screens the aspect-ratio height is already well past 480px
	   so this has no effect there. */
	min-height: 480px;
}
/* Clipping lives here now, not on .kwk-hero itself — .kwk-hero__nav's
   dropdown is anchored to the bottom of the hero and needs to open
   downward past that edge, over whatever section follows. Clipping the
   whole hero was cutting the dropdown off right where it should show. */
.kwk-hero__slides{ position: absolute; inset: 0; overflow: hidden; }
.kwk-hero__slide{
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden; transition: opacity .6s ease;
}
.kwk-hero__slide.is-active{ opacity: 1; visibility: visible; }
.kwk-hero__media{
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.kwk-hero__scrim{
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
}
.kwk-hero__content{
	position: absolute; left: var(--kwk-gutter-mobile); right: var(--kwk-gutter-mobile);
	/* Was 130px — the overlaid logo above it (top:24px, capped at 90px
	   tall) ends around 114px, leaving only ~16px of clear gap before this
	   started. Fine for a short one-line title, but a long real post
	   title wraps to several lines and immediately reads as crowding the
	   logo above it. */
	top: 160px;
	max-width: 720px;
}
@media (min-width: 1000px){
	.kwk-hero{
		/* Single source of truth for the logo's width at this breakpoint —
		   both .site-logo--overlay img (below) and .kwk-hero__content's
		   left offset here read from this same value, so the logo and the
		   title always divide the available space between them instead of
		   one being fixed-size and the other having to awkwardly dodge it.
		   Scales from 220px up to a 420px ceiling as the viewport grows;
		   30vw crosses 420px at exactly 1400px wide. */
		--kwk-hero-logo-w: clamp(220px, 30vw, 420px);
	}
	.kwk-hero__content{
		top: 34px;
		/* Logo's own left inset (var(--kwk-gutter)) + its current width +
		   a fixed 40px breathing gap between the two. */
		left: calc(var(--kwk-gutter) + var(--kwk-hero-logo-w) + 40px);
		right: var(--kwk-gutter);
		max-width: none;
	}
}
.kwk-hero__kicker{
	display: inline-block;
	background: rgba(var(--kwk-primary-rgb), .5);
	padding: 8px 14px;
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	margin: 0 0 6px;
}
.kwk-hero__title{
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 600;
	margin: 0;
	/* Growing line-height (tried 1.7, then 2) never actually fixed the
	   highlight-box overlap between wrapped lines — because the real
	   cause wasn't too little space between lines, it was the span's own
	   top/bottom padding physically extending past its line's boundary
	   into the next one, which more line-height can't prevent no matter
	   how large. The real fix is on .kwk-hero__title span below (padding
	   is now horizontal-only) — this can go back to a normal, modest
	   value now that there's nothing to make room for. */
	line-height: 1.3;
	/* Real post titles can run long (auto-fill "Select a Post" slides pull
	   whatever the post's actual title is) — cap at 3 lines with an
	   ellipsis instead of letting the box grow indefinitely and crowd
	   whatever sits above/below it. The inner span keeps its own
	   display:inline + box-decoration-break:clone for the per-line
	   highlight background — line-clamp on this outer h1 doesn't affect
	   that, it just truncates how many wrapped lines are allowed to show. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kwk-hero__title span{
	background: rgba(var(--kwk-primary-rgb), .5);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	/* Was "6px 14px" — top/bottom padding on an inline span with
	   box-decoration-break:clone paints OUTSIDE that line's own box,
	   growing down/up into whichever line is next to it — no amount of
	   line-height fixes that, since the padding always adds on top of
	   whatever gap line-height provides. Horizontal-only padding means
	   this box's height is exactly the line's own height, so it's
	   physically impossible for it to reach into the next line. */
	padding: 0 14px;
	display: inline;
}
.kwk-hero__excerpt{
	font-size: 14px;
	line-height: 1.5;
	/* Was 4px — smaller than the title's own bottom padding (6px) plus
	   this excerpt's own top padding (4px), so the two highlighted boxes
	   touched/overlapped instead of reading as separate title vs.
	   description blocks. */
	margin: 16px 0 0;
	max-width: 480px;
	/* Same runaway-length safety net as the title above — 2 lines max. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kwk-hero__excerpt span{
	background: rgba(var(--kwk-primary-rgb), .5);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 4px 14px;
	display: inline;
}
.kwk-hero__dots{
	position: absolute; bottom: 90px; right: var(--kwk-gutter-mobile);
	display: flex; gap: 8px;
}
.kwk-hero__dot{
	width: 8px; height: 8px; border-radius: 50%; border: none;
	background: rgba(255,255,255,.4); cursor: pointer; padding: 0;
}
.kwk-hero__dot.is-active{ background: var(--kwk-white); }
.kwk-hero__arrow{
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.6);
	color: var(--kwk-white); font-size: 24px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	z-index: 3;
}
.kwk-hero__arrow--prev{ left: var(--kwk-gutter-mobile); }
.kwk-hero__arrow--next{ right: var(--kwk-gutter-mobile); }

.kwk-hero__logo{
	position: absolute; left: var(--kwk-gutter-mobile); top: 24px; z-index: 2;
}
/* Homepage-only: caps out at 480px wide on spacious screens, but shrinks
   fluidly with the viewport below that — full original-size rendering
   wasn't responsive and overlapped the hero title/kicker text on smaller
   screens. (Interior pages use a different rule — .site-logo img under
   .site-header--solid — left at its fixed size, unaffected by this.)

   Below 1000px, .kwk-hero__content (the title/kicker block) sits BELOW the
   logo, not beside it (see the @media(min-width:1000px) block further down
   this file) — with only ~106px of vertical gap before it starts. A
   width-only cap let a tall/square logo grow well past that and overlap
   the text underneath, so max-height reins in that dimension too on
   exactly the range where the overlap happens. From 1000px up, the content
   moves beside the logo instead, so the height cap is lifted and only the
   480px width ceiling applies. */
.site-logo--overlay img{
	height: auto;
	width: auto;
	max-width: min(420px, 45vw);
	max-height: 90px;
}
@media (min-width: 1000px){
	.site-logo--overlay img{
		/* Was a flat 420px — fine on a wide screen, but at ~1000-1450px
		   wide that left too little room for the title next to it (fixing
		   that by pushing the title further right, on its own, just
		   squeezed the title's box down to almost nothing instead —
		   pushing one side over doesn't help if the other side doesn't
		   also give up space). Scales down with the viewport instead,
		   using the same --kwk-hero-logo-w value the title's left offset
		   below is built from, so the two always divide the available
		   width sensibly instead of one crowding the other. */
		max-width: var(--kwk-hero-logo-w);
		max-height: none;
	}
}

.kwk-hero__nav{
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 18px var(--kwk-gutter-mobile);
	background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
}
.kwk-hero__nav .site-nav{ display: flex; justify-content: flex-start; }

/* -------------------- Shared site-wide background -------------------- */
/* One image on <body> (set inline in header.php) now runs behind every
   page on the site — home, posts, pages, archives — not just the front
   page. "fixed" keeps it a single backdrop the whole page scrolls over,
   instead of stretching one photo across the full (very tall) document
   height. Note: post/page text readability against this still needs a
   pass (tracked as a follow-up — see chat). */
body{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
@supports ( -webkit-touch-callout: none ) {
	/* iOS Safari ignores background-attachment: fixed — fall back to scroll
	   so the image still shows there, just scrolling with the page. */
	body{ background-attachment: scroll; }
}

/* -------------------- Statement block -------------------- */
.kwk-statement{
	position: relative;
	background: transparent center/cover no-repeat;
	color: var(--kwk-white);
	padding: 110px var(--kwk-gutter-mobile);
}
.kwk-statement__scrim{
	/* Tint now lives on the shared <body> background image (see header.php),
	   so this stays transparent by default and no longer double-tints —
	   it only needs its own color when an editor sets a custom per-block
	   background image (statement_background) that isn't the shared photo. */
	position: absolute; inset: 0;
	background: transparent;
}
.kwk-statement[style*="background-image"] .kwk-statement__scrim{
	background: rgba(var(--kwk-primary-rgb), .78);
}
.kwk-statement__inner{ position: relative; max-width: var(--kwk-container); margin: 0 auto; }
.kwk-statement--center .kwk-statement__inner{ text-align: center; }
.kwk-statement__text{
	/* Defaults — apply as long as the editor doesn't override them with
	   their own inline styles inside the WYSIWYG field (Text tab).
	   No max-width here (there used to be a 900px cap) — that left the box
	   flush against the left edge with no auto margins, so a centered <p>
	   inside it only centered within that narrower box, not across the
	   actual section. Spanning the full inner width instead means
	   text-align:center in your HTML centers against the real section
	   width. If you want a narrower centered column, add your own
	   max-width + margin:auto on the <p>/<div> in the Text tab. */
	font-family: var(--kwk-font-display);
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 700;
}
/* The WYSIWYG field always wraps its output in <p> tag(s) — reset that
   margin so a single line of text still sits flush like the old plain-text
   version did, but keep normal paragraph spacing when an editor writes more
   than one line. */
.kwk-statement__text p{ margin: 0; }
.kwk-statement__text p + p{ margin-top: .5em; }
/* Mobile-only: force "Earth + Adventure" (or whatever short line is here)
   onto one line. Scoped to max-width:640px so the desktop/tablet version
   is completely untouched. !important is needed here because the actual
   saved text has its own inline font-size (set via the Text tab), which
   normally beats any stylesheet rule regardless of specificity — without
   it this rule would have no visible effect at all. white-space:nowrap
   is the actual "never wrap" guarantee; the font-size shrink is just what
   keeps that from overflowing off the edge of the screen. */
@media (max-width: 640px){
	.kwk-statement__text p{
		font-size: clamp(20px, 7vw, 32px) !important;
		white-space: nowrap;
	}
	/* Section itself was 110px top/bottom — fine on desktop where the
	   section spans a big open area, but on mobile it left a lot of dead
	   space above/below a single short line of text. Mobile-only (desktop
	   untouched) — tightens it down and, more importantly, switches to
	   flex + align-items:center so the text is truly centered within a
	   known min-height, rather than relying on padding-top/bottom to
	   match (equal padding numbers don't guarantee an equal-looking gap
	   if the saved text has any extra/empty line in it — flex-centering
	   the box sidesteps that entirely). */
	.kwk-statement{
		display: flex;
		align-items: center;
		min-height: 160px;
		padding-top: 24px;
		padding-bottom: 24px;
	}
	.kwk-statement__inner{ width: 100%; }
	/* .kwk-story (the section right after this one) has its own 60px
	   padding-top — stacked on top of .kwk-statement's own padding-bottom
	   above, that made the gap below "Earth + Adventure" much bigger than
	   the gap above it, even though .kwk-statement itself is correctly
	   centered. Trimming just this section's top padding (its
	   padding-bottom, before the next section, is untouched) balances the
	   two gaps out. Mobile-only — desktop's larger spacing is unaffected. */
	.kwk-story{ padding-top: 24px; }
}
/* Images inserted via "Add Media" in the Text field (see inc/acf-fields.php
   — media_upload is enabled there) — keep them from overflowing on
   narrow screens, and give them breathing room from surrounding text/
   other images regardless of how the editor aligns them (left/right/
   center/none, all standard WP image-alignment classes). */
.kwk-statement__text img{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 16px 0;
}
.kwk-statement__text img.alignleft{
	display: inline;
	float: left;
	margin: 4px 20px 16px 0;
}
.kwk-statement__text img.alignright{
	display: inline;
	float: right;
	margin: 4px 0 16px 20px;
}
.kwk-statement__text img.aligncenter{
	margin-left: auto;
	margin-right: auto;
}

/* -------------------- Featured story ("News Block") -------------------- */
.kwk-story{
	background: transparent;
	color: var(--kwk-white);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	padding: 60px var(--kwk-gutter-mobile);
	align-items: center;
	position: relative;
}
.kwk-story--has-bg{
	background-size: cover;
	background-position: center;
}
.kwk-story__scrim{
	/* Same reasoning as .kwk-statement__scrim above — transparent by
	   default since the shared body background already carries the tint;
	   only tints its own color when a custom story_background image is set. */
	position: absolute; inset: 0;
	background: transparent;
}
.kwk-story--has-bg .kwk-story__scrim{
	background: rgba(var(--kwk-primary-rgb), .78);
}
.kwk-story__image, .kwk-story__content{ position: relative; z-index: 1; }
.kwk-story--img-right{ direction: rtl; }
.kwk-story--img-right > *{ direction: ltr; }
/* Fixed 400px width, but height is NOT fixed — it's left to scale
   naturally from whatever the source photo's own ratio is, so nothing
   gets cropped or distorted. Since 400px is narrower than the grid
   column, margin-left:auto pushes the image against the INNER edge
   (nearest the text) instead of leaving it pinned to the outer edge with
   a big gap opening up next to the text — margin-right:auto mirrors that
   for the img-right layout, where the image sits in the right-hand
   column instead and should hug its left/inner edge. Plain physical
   margins on purpose (not justify-self:start/end), so this doesn't get
   tangled up with the direction:rtl trick above used to swap columns. */
.kwk-story__image{
	width: 400px;
	margin-left: auto;
	border-radius: 2px;
	overflow: hidden;
}
.kwk-story--img-right .kwk-story__image{
	margin-left: 0;
	margin-right: auto;
}
.kwk-story__image img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}
.kwk-story__title{
	font-size: clamp(24px, 3vw, 34px);
	text-decoration: underline;
	text-underline-offset: 8px;
}
.kwk-story__excerpt{ opacity: .85; max-width: 46ch; }
.kwk-story__link{ margin-top: 12px; display: inline-flex; }

/* -------------------- Post grid -------------------- */
.kwk-grid{
	/* Tint now comes from the shared body background — no image option of
	   its own, so this just stays transparent (was double-tinting before). */
	background: transparent;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	gap: 36px 12px;
	padding: 0 var(--kwk-gutter-mobile) 60px;
}
.kwk-grid--archive{ padding-top: 40px; background: transparent; }
.kwk-grid__card{
	display: block;
	color: var(--kwk-white);
}
/* Fixed square cell — every card lines up at the same height across the
   row no matter what shape the source photo is (landscape, portrait,
   whatever). The template requests the 'kwk-card' 700x700 hard-crop
   already; object-fit:cover here is a safety net so cropping still looks
   right even for an image that only has a differently-shaped size
   available. */
.kwk-grid__image-wrap{
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.kwk-grid__image{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Caption sits below the image (not over it), but its background runs the
   exact same width as the image above it — no outer card padding/border,
   so the two look like one flush block instead of a framed card. */
.kwk-grid__text{
	background: rgba(0,0,0,.55);
	padding: 16px 16px 20px;
	font-size: 14px; line-height: 1.4;
	border-radius: 0 0 10px 10px;
}
.kwk-grid__text p{ margin: 0 0 10px; font-size: 17px; font-weight: 700; font-family: var(--kwk-font-display); }

/* -------------------- Poster strip (free-form, not post/page content) -------------------- */
.kwk-posters{
	background: transparent;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: 36px 12px;
	padding: 0 var(--kwk-gutter-mobile) 60px;
}
.kwk-posters__item{
	display: block;
	color: var(--kwk-white);
}
.kwk-posters__image-wrap{
	display: block;
}
/* No fixed aspect-ratio/crop here on purpose — each poster keeps its own
   natural height (a poster, an ID-style scan, a square logo, etc. all
   differ), while the grid column still keeps every item the same width. */
.kwk-posters__image{ display: block; width: 100%; height: auto; }
.kwk-posters__text{
	margin: 14px 4px 0; font-size: 14px; line-height: 1.4;
}

/* -------------------- Footer -------------------- */
.site-footer{
	position: relative;
	background: transparent;
	color: rgba(255,255,255,.85);
	padding: 60px var(--kwk-gutter-mobile) 30px;
}
.site-footer__scrim{
	/* Tint now comes from the shared body background — no image option of
	   its own, so this just stays transparent (was double-tinting before,
	   which is what made the footer look like a separate darker block). */
	position: absolute; inset: 0;
	background: transparent;
}
.site-footer__inner{ position: relative; max-width: var(--kwk-container); margin: 0 auto; }
/* Pre-footer 4-column band (Theme Options → Pre-Footer — 4 Column Band) —
   4 equal-width free-form boxes sitting above the rest of the footer, on
   every page. Reuses .site-footer__col styling below (img/heading/p/li/a
   rules) so content dropped in here matches the footer boxes automatically.
   The bottom border + padding separates it from .site-footer__top below. */
.site-footer__band{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,.15);
}
/* 3 free-form HTML columns — Column 1 (2fr) renders at 2x the width of
   Columns 2 & 3 (1fr each), i.e. 50% / 25% / 25%. */
.site-footer__top{
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 40px;
}
/* Generic styling for whatever gets typed/pasted into a footer column
   (logo image, headings, paragraphs, link lists) so it fits the site look
   without needing extra classes in the editor. */
.site-footer__col img{ max-width: 100%; height: auto; margin-bottom: 12px; }
.site-footer__col h1, .site-footer__col h2, .site-footer__col h3, .site-footer__col h4{
	font-family: var(--kwk-font-body); font-size: 13px; text-transform: uppercase;
	letter-spacing: .06em; color: var(--kwk-white); margin: 0 0 12px;
}
/* No fixed font-size on p here on purpose — a size set via inline
   style="font-size:...px" (Text tab) on the p/wrapper needs to inherit
   down, and a fixed size directly on the child would always win over that
   inherited value regardless of specificity. Falls back to the browser
   default size when no inline style is set on the content.
   li DOES get a fixed default (was inheriting the unset browser default —
   16px — which read too large against the display font) — if you want a
   specific link/item a different size, add an inline style on that li or
   a directly; that still overrides this, same as always. */
.site-footer__col p{ margin: 0 0 10px; }
.site-footer__col ul, .site-footer__col ol{ list-style: none; margin: 0; padding: 0; }
.site-footer__col li{
	margin-bottom: 8px;
	font-family: var(--kwk-font-display); /* same headline font as hero/story/grid titles */
	font-size: 14px;
}
/* Same hover treatment already used for the archive Older/Newer Entries
   links and Previous/Next Post links (white by default, shifts to the
   site accent color on hover) — reused here instead of inventing a new
   pattern, so link hover behavior reads consistently everywhere. */
.site-footer__col a{
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .2s ease;
}
.site-footer__col a:hover{
	color: var(--kwk-accent);
}
/* Partners row + legal text/copyright share one row, using the SAME
   2fr/1fr/1fr grid as .site-footer__top above — partners sit under the
   Brand column (track 1), legal text/copyright start under the Links
   column (track 2) so their left edges line up. */
.site-footer__bottom-row{
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	align-items: flex-start;
	gap: 24px;
	padding: 24px 0; border-top: 1px solid rgba(255,255,255,.15);
}
.site-footer__partners{
	display: flex; flex-wrap: wrap; align-items: center; gap: 28px;
}
/* Default sizing for whatever gets dropped in here (logo, text, video
   embed) — no forced white-silhouette filter anymore since this can now
   hold full-color logos, not just monochrome ones. Add your own
   style="..." on an individual image/iframe in the Text tab to override. */
.site-footer__partners img{ max-height: 40px; width: auto; }
.site-footer__partners iframe{ max-width: 100%; border: 0; }
.site-footer__partners p{ margin: 0; }
.site-footer__legal-col{
	grid-column: 2 / -1; /* starts at the Links column, spans through Connect */
	max-width: 480px;
}
.site-footer__legal{ font-size: 11px; opacity: .6; margin: 0 0 8px; text-align: left; }
.site-footer__copyright{ font-size: 12px; opacity: .5; margin: 0; }

/* -------------------- Single / page -------------------- */
/* Single post / page reading column — a fixed, modest side padding (not the
   site's 200px full-bleed gutter) so the image and the text block line up
   at the same width instead of the text being squeezed down to a sliver. */
.kwk-single__hero{
	max-width: 820px; margin: 0 auto; padding: 60px 24px 0;
}
.kwk-single__hero img{
	display: block; width: 100%; height: 460px; object-fit: cover;
}
.kwk-single__inner, .kwk-page__inner{
	max-width: 820px; margin: 0 auto; padding: 60px 24px;
	color: var(--kwk-white);
}
.kwk-single__kicker{ text-transform: uppercase; letter-spacing: .06em; color: var(--kwk-accent); font-size: 13px; }
.kwk-single__title{ font-size: clamp(28px, 4vw, 44px); font-weight: 700; }
.kwk-single__content{ opacity: .92; }
/* Links typed into body content (post/page content, and the Statement
   block's WYSIWYG field) — the global `a{ color:inherit; text-decoration:
   none; }` reset at the top of this file makes these invisible as links
   otherwise. Distinct colors for not-yet-clicked vs already-clicked
   (:link / :visited), a clear hover shift, and an underline so a link is
   recognizable as a link even before hovering it. */
.kwk-single__content a,
.kwk-page__inner a,
.kwk-statement__text a{
	color: var(--kwk-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .2s ease;
}
.kwk-single__content a:visited,
.kwk-page__inner a:visited,
.kwk-statement__text a:visited{
	color: rgba(111,168,201,.55); /* muted/dimmer accent (Sky/Glacier Blue) — "already read this link" */
}
.kwk-single__content a:hover,
.kwk-page__inner a:hover,
.kwk-statement__text a:hover{
	color: var(--kwk-white);
}
/* Small arrow after the link text — currentColor so it automatically
   follows the same :visited/:hover color changes as the link itself,
   without needing separate rules. text-decoration:none so the underline
   doesn't run under the icon glyph too. */
.kwk-single__content a::after,
.kwk-page__inner a::after,
.kwk-statement__text a::after{
	content: "↗";
	display: inline-block;
	margin-left: 3px;
	font-size: .75em;
	text-decoration: none;
	color: currentColor;
}
.archive-header{ max-width: var(--kwk-container); margin: 0 auto; padding: 60px var(--kwk-gutter-mobile) 20px; color: var(--kwk-white); }

/* -------------------- "Older/Newer Entries" + "Previous/Next Post" nav -------------------- */
/* Styles WordPress's default the_posts_navigation() (archives) and
   the_post_navigation() (single posts) markup — both unstyled out of the
   box, which is why they looked "missing" against the dark background.
   Same simple left/right text-link treatment for both (uppercase,
   letter-spacing, accent on hover); .post-navigation only differs in
   width, matching the narrower single-post content column instead of the
   full-width archive grid. */
.posts-navigation,
.post-navigation{
	margin: 0 auto;
}
/* --kwk-gutter-mobile is the WIDE responsive gutter used by full-width
   sections (it becomes 200px at desktop widths — see the >=1000px media
   query further down) — correct for .posts-navigation, which spans the
   full --kwk-container width same as the archive grid above it. But
   .post-navigation sits inside the single-post column, which uses a
   fixed 24px side padding (see .kwk-single__inner) — using the wide
   gutter here instead left only a ~420px sliver in the middle for the
   links on desktop, squeezing "Previous"/"Next" together instead of
   spreading them across the column like intended. */
.posts-navigation{ max-width: var(--kwk-container); padding: 20px var(--kwk-gutter-mobile) 60px; }
.post-navigation{ max-width: 820px; padding: 20px 24px 60px; }
.posts-navigation .nav-links,
.post-navigation .nav-links{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	border-top: 1px solid rgba(255,255,255,.15);
	padding-top: 24px;
}
.posts-navigation .nav-previous,
.posts-navigation .nav-next,
.post-navigation .nav-previous,
.post-navigation .nav-next{
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.posts-navigation a,
.post-navigation a{
	color: var(--kwk-white);
	transition: color .25s ease;
}
.posts-navigation a:hover,
.post-navigation a:hover{
	color: var(--kwk-accent);
}
/* WordPress only outputs whichever of these two actually has somewhere to
   go — e.g. on page 1 there's no "Newer" link yet, so .nav-next (Older
   Entries) is the sole child; push it right instead of leaving it
   stranded on the left where .nav-previous would normally sit. Same idea
   on a single post at the very start/end of the whole post list. */
.posts-navigation .nav-next:only-child,
.post-navigation .nav-next:only-child{
	margin-left: auto;
}

/* =========================================================
   Responsive
========================================================= */
@media (min-width: 1000px){
	:root{ --kwk-gutter-mobile: var(--kwk-gutter); }
}

@media (max-width: 900px){
	.kwk-story{ grid-template-columns: 1fr; }
	.kwk-story--img-right{ direction: ltr; }
	/* The 700px fixed height is sized for the two-column desktop layout —
	   once the story stacks to a single column, that height would use up
	   most of the screen on a phone, so let width drive it here instead
	   (same 9:11 ratio, capped so it doesn't get taller than the viewport
	   is comfortable with). */
	.kwk-story__image{
		height: auto;
		width: 100%;
		max-height: 70vh;
		justify-self: stretch;
	}
	.site-footer__band{ grid-template-columns: 1fr 1fr; }
	.site-footer__top{ grid-template-columns: 1fr 1fr; }
	.site-footer__bottom-row{ grid-template-columns: 1fr 1fr; }
	.site-footer__legal-col{ grid-column: 2 / -1; }
}

@media (max-width: 640px){
	.kwk-grid{ grid-template-columns: repeat(2, 1fr); }
	.kwk-posters{ grid-template-columns: repeat(2, 1fr); }
	.site-footer__band{ grid-template-columns: 1fr; }
	.site-footer__top{ grid-template-columns: 1fr; }
	.site-footer__bottom-row{ grid-template-columns: 1fr; }
	.site-footer__legal-col{ grid-column: 1; max-width: none; }
	.kwk-hero__content{ top: auto; bottom: 110px; }

	.site-nav__toggle{
		display: flex; flex-direction: column; gap: 5px;
		background: none; border: none; padding: 6px; cursor: pointer;
		/* Buttons don't inherit text color from their ancestors by default
		   in every browser's UA stylesheet — without this it was falling
		   back to a plain black, which disappeared against the dark hero
		   photo / dark interior header instead of showing up as white
		   like the rest of the nav. */
		color: var(--kwk-white);
	}
	.site-nav__toggle span{ width: 22px; height: 2px; background: currentColor; }
	/* On the homepage hero, the whole nav (toggle + dropdown list) was
	   anchored to the BOTTOM of the hero (design intent for desktop), which
	   on mobile put the hamburger button far below the logo instead of
	   level with it. Re-anchor it to the same top offset as
	   .kwk-hero__logo instead — keeping left:0/right:0 (full width, from
	   the base rule, not overridden here) is required so the dropdown
	   list — which sizes itself to this same element via its own
	   left:0;right:0 — still spans the full screen width when opened,
	   rather than shrinking to just the button's width. The button itself
	   is pushed to the right edge of that full-width bar below instead. */
	.kwk-hero__nav{
		top: 24px;
		bottom: auto;
		padding: 0 var(--kwk-gutter-mobile);
		background: none;
	}
	.kwk-hero__nav .site-nav{ justify-content: flex-end; }
	.site-nav__list{
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; gap: 0;
		background: var(--kwk-primary);
		max-height: 0; overflow: hidden; transition: max-height .3s ease;
	}
	.site-nav.is-open .site-nav__list{ max-height: 600px; overflow-y: auto; }
	.site-nav__list li{ padding: 14px var(--kwk-gutter-mobile); border-top: 1px solid rgba(255,255,255,.1); }

	/* Dropdowns don't hover on touch — on mobile a sub-menu just sits
	   expanded inline (indented) under its parent, inside the same
	   slide-down panel, instead of the desktop's floating overlay. */
	.site-nav__list li.menu-item-has-children > a{
		padding: 14px var(--kwk-gutter-mobile);
		margin: 0;
		border-radius: 0;
	}
	.site-nav__list .sub-menu{
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		background: rgba(0,0,0,.18);
		min-width: 0;
		padding: 0;
	}
	.site-nav__list .sub-menu li{ padding-left: calc(var(--kwk-gutter-mobile) + 14px); }
	.site-nav__list .sub-menu a{ padding: 12px 0; color: rgba(255,255,255,.75); }
}