/*
Theme Name: Kanneduru Karkala
Theme URI: https://whirldesigns.com
Author: Whirl Designs
Author URI: https://whirldesigns.com
Description: Local Kannada news theme for kannedurukarkala.com — Karkala, Udupi and Dakshina Kannada. Temple-heritage front page.
Version: 2.0.0
Text Domain: kanneduru
*/

@import url('fonts-generated.css');

/* ============================================================
   PART 1 — inner pages (single, archive, page, search, 404).
   Retained from v1 so nothing that already worked breaks.
   ============================================================ */
@import url('fonts-generated.css');

/* ---------- tokens ---------- */
:root{
	--kk-red: #a91f1a;
	--kk-red-dark: #7c1613;
	--kk-gold: #b9821f;
	--kk-ink: #201a17;
	--kk-ink-soft: #5a504a;
	--kk-line: #e7ded2;
	--kk-bg: #ffffff;
	--kk-bg-soft: #faf6ef;
	--kk-max: 1180px;
	--kk-radius: 10px;
	--kk-font-body: 'Noto Sans Kannada', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--kk-font-head: 'Baloo Tamma 2', 'Noto Sans Kannada', system-ui, sans-serif;
}

/* ---------- reset-ish base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
	margin: 0;
	background: var(--kk-bg);
	color: var(--kk-ink);
	font-family: var(--kk-font-body);
	font-size: 18px;
	line-height: 1.75;
	overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--kk-font-head); margin: 0; line-height: 1.3; }
p{ margin: 0 0 1em; }
button{ font: inherit; }

.screen-reader-text{
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.kk-skip-link{
	position: absolute;
	left: 8px; top: -60px;
	background: var(--kk-red);
	color: #fff;
	padding: 10px 16px;
	border-radius: 6px;
	z-index: 1000;
	transition: top .15s ease;
}
.kk-skip-link:focus{ top: 8px; }

:focus-visible{ outline: 3px solid var(--kk-gold); outline-offset: 2px; }

.kk-wrap{ max-width: var(--kk-max); margin: 0 auto; padding: 0 16px; }

/* ---------- masthead ---------- */
.kk-masthead{ border-bottom: 3px solid var(--kk-red); background: var(--kk-bg); }
.kk-masthead-bar{ height: 4px; background: linear-gradient(90deg, var(--kk-red), var(--kk-gold)); }
.kk-masthead-inner{
	max-width: var(--kk-max); margin: 0 auto; padding: 14px 16px;
	display: flex; align-items: center; gap: 14px;
}
.kk-logo{ flex-shrink: 0; display: block; }
.kk-logo img{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.kk-brand-text{ flex: 1 1 auto; min-width: 0; }
.kk-brand-name{
	display: block; font-family: var(--kk-font-head); font-weight: 700;
	font-size: clamp(1.15rem, 4vw, 1.5rem); color: var(--kk-red-dark);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kk-brand-tag{ display: block; font-size: .8rem; color: var(--kk-ink-soft); }

.kk-search-toggle, .kk-nav-toggle{
	background: none; border: 1px solid var(--kk-line); border-radius: 8px;
	width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
	color: var(--kk-ink); cursor: pointer; flex-shrink: 0;
}
.kk-nav-toggle span, .kk-nav-toggle span::before, .kk-nav-toggle span::after{
	content: ''; display: block; width: 20px; height: 2px; background: var(--kk-ink); position: relative;
	box-shadow: 0 -6px 0 var(--kk-ink), 0 6px 0 var(--kk-ink);
}

.kk-search-wrap{ display: none; }
.kk-search-wrap.is-open{ display: block; }
.kk-search-wrap .kk-search-form{ max-width: var(--kk-max); margin: 0 auto; padding: 0 16px 14px; }

.kk-nav-primary{ display: none; }
.kk-menu{ display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 10px 0; }
.kk-menu li a{
	display: inline-block; padding: 4px 2px; font-weight: 600; font-size: .98rem;
	color: var(--kk-ink); border-bottom: 2px solid transparent;
}
.kk-menu li a:hover, .kk-menu li a:focus{ color: var(--kk-red); border-color: var(--kk-gold); }

.kk-nav-mobile{ border-top: 1px solid var(--kk-line); background: var(--kk-bg-soft); }
.kk-nav-mobile[hidden]{ display: none; }
.kk-nav-mobile .kk-wrap{ padding: 6px 16px 14px; }
.kk-nav-mobile .kk-menu{ flex-direction: column; gap: 0; padding: 4px 0; }
.kk-nav-mobile .kk-menu li a{ display: block; padding: 11px 4px; border-bottom: 1px solid var(--kk-line); }
.kk-nav-mobile .kk-search-form{ padding: 10px 0 4px; }

/* ---------- search form ---------- */
.kk-search-form{ display: flex; gap: 8px; }
.kk-search-input{
	flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 1px solid var(--kk-line);
	border-radius: 8px; font-size: 1rem; font-family: var(--kk-font-body);
}
.kk-search-submit{
	background: var(--kk-red); color: #fff; border: 0; border-radius: 8px; padding: 0 18px; cursor: pointer;
}
.kk-search-submit:hover{ background: var(--kk-red-dark); }

/* ---------- main / sections ---------- */
.kk-main{ max-width: var(--kk-max); margin: 0 auto; padding: 18px 16px 48px; }
.kk-section{ margin-top: 40px; }
.kk-section-title{
	font-size: 1.3rem; font-weight: 700; color: var(--kk-ink);
	padding-left: 14px; border-left: 5px solid var(--kk-red); margin-bottom: 16px;
}
.kk-empty{ color: var(--kk-ink-soft); padding: 30px 0; text-align: center; }

/* ---------- hero ---------- */
.kk-hero{ display: flex; flex-direction: column; gap: 20px; }
.kk-hero-side{ display: flex; flex-direction: column; gap: 18px; }

/* ---------- cards (shared) ---------- */
.kk-card{ display: flex; flex-direction: column; }
.kk-card-media{ display: block; border-radius: var(--kk-radius); overflow: hidden; background: var(--kk-bg-soft); }
.kk-card-media img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kk-card-body{ padding-top: 10px; }
.kk-card-kicker{
	display: inline-block; font-size: .78rem; font-weight: 700; color: var(--kk-red);
	letter-spacing: .02em; margin-bottom: 4px;
}
.kk-card-kicker:hover{ text-decoration: underline; }
.kk-card-title{ font-weight: 700; }
.kk-card-title a:hover{ color: var(--kk-red-dark); text-decoration: underline; }
.kk-card-excerpt{ color: var(--kk-ink-soft); font-size: .96rem; margin: 8px 0 0; }
.kk-card-meta{ color: var(--kk-ink-soft); font-size: .85rem; margin: 8px 0 0; }

/* hero card */
.kk-card--hero .kk-card-media img{ aspect-ratio: 16 / 11; }
.kk-card--hero .kk-card-title{ font-size: clamp(1.4rem, 5vw, 2rem); }

/* secondary (top stories) */
.kk-card--secondary{ flex-direction: row; gap: 12px; align-items: flex-start; }
.kk-card--secondary .kk-card-media{ width: 110px; flex-shrink: 0; }
.kk-card--secondary .kk-card-body{ padding-top: 0; }
.kk-card--secondary .kk-card-title{ font-size: 1.05rem; }

/* list (latest news) */
.kk-list{ display: flex; flex-direction: column; gap: 16px; }
.kk-card--list{ flex-direction: row; gap: 14px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--kk-line); }
.kk-card--list .kk-card-media{ width: 96px; flex-shrink: 0; }
.kk-card--list .kk-card-body{ padding-top: 0; }
.kk-card--list .kk-card-title{ font-size: 1.02rem; }

/* grid (category sections / related) */
.kk-grid{ display: grid; grid-template-columns: 1fr; gap: 22px; }
.kk-section-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kk-section-more{ font-size: .9rem; font-weight: 600; color: var(--kk-red); white-space: nowrap; }
.kk-section-more:hover{ text-decoration: underline; }

/* ---------- breadcrumb ---------- */
.kk-breadcrumb{ margin: 14px 0; font-size: .85rem; color: var(--kk-ink-soft); }
.kk-breadcrumb ol{ display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.kk-breadcrumb li:not(:last-child)::after{ content: '›'; margin-left: 6px; color: var(--kk-line); }
.kk-breadcrumb a:hover{ color: var(--kk-red); text-decoration: underline; }
.kk-breadcrumb li[aria-current] span{ color: var(--kk-ink); }

/* ---------- single post ---------- */
.kk-single-head{ margin-bottom: 14px; }
.kk-kicker{
	display: inline-block; font-size: .85rem; font-weight: 700; color: var(--kk-red);
	margin-bottom: 8px;
}
.kk-kicker:hover{ text-decoration: underline; }
.kk-headline{ font-size: clamp(1.55rem, 5vw, 2.5rem); font-weight: 700; }
.kk-single-meta{ margin-top: 10px; font-size: .92rem; color: var(--kk-ink-soft); display: flex; gap: 8px; flex-wrap: wrap; }
.kk-single-media{ margin: 18px 0; }
.kk-single-media img{ border-radius: var(--kk-radius); width: 100%; }
.kk-single-media figcaption{ font-size: .85rem; color: var(--kk-ink-soft); margin-top: 6px; }

.kk-share{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0; padding: 12px 0; border-top: 1px solid var(--kk-line); border-bottom: 1px solid var(--kk-line); }
.kk-share-label{ font-weight: 700; font-size: .88rem; color: var(--kk-ink-soft); margin-right: 2px; }
.kk-share-btn{
	font-size: .85rem; font-weight: 600; padding: 7px 14px; border-radius: 999px;
	border: 1px solid var(--kk-line); color: var(--kk-ink);
}
.kk-share-btn:hover{ border-color: var(--kk-red); color: var(--kk-red); }

.kk-content{ font-size: 1.08rem; }
.kk-content > *:first-child{ margin-top: 0; }
.kk-content p{ margin: 0 0 1.1em; }
.kk-content a{ color: var(--kk-red); text-decoration: underline; }
.kk-content img{ border-radius: var(--kk-radius); margin: 8px 0; }
.kk-content h2, .kk-content h3{ margin: 1.3em 0 .5em; }
.kk-content blockquote{
	margin: 1.2em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--kk-gold); color: var(--kk-ink-soft); font-style: normal;
}
.kk-content ul, .kk-content ol{ margin: 0 0 1.1em; padding-left: 1.4em; list-style: revert; }

.kk-related{ margin-top: 44px; }

/* ---------- archive / search / page / 404 ---------- */
.kk-archive-head{ margin-bottom: 18px; }
.kk-archive-title{ font-size: 1.6rem; }
.kk-page-title{ font-size: 1.6rem; margin-bottom: 16px; }
.kk-404{ text-align: center; padding: 40px 0; }
.kk-404 .kk-headline{ margin-bottom: 10px; }
.kk-404 .kk-search-form{ max-width: 420px; margin: 20px auto; }
.kk-404 .kk-home-link{ color: var(--kk-red); font-weight: 600; text-decoration: underline; }

.kk-pagination ul{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; }
.kk-pagination a, .kk-pagination span{
	display: inline-block; padding: 8px 13px; border: 1px solid var(--kk-line); border-radius: 6px; font-size: .9rem;
}
.kk-pagination .current{ background: var(--kk-red); border-color: var(--kk-red); color: #fff; }
.kk-pagination a:hover{ border-color: var(--kk-red); color: var(--kk-red); }

/* ---------- footer ---------- */
.kk-footer{ margin-top: 50px; border-top: 3px solid var(--kk-red); background: var(--kk-bg-soft); }
.kk-footer-inner{ max-width: var(--kk-max); margin: 0 auto; padding: 30px 16px 22px; text-align: center; }
.kk-footer-brand{ display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }
.kk-footer-brand img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.kk-footer-brand strong{ font-family: var(--kk-font-head); color: var(--kk-red-dark); font-size: 1.05rem; }
.kk-footer-menu ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 16px; }
.kk-footer-menu a{ font-size: .92rem; font-weight: 600; }
.kk-footer-menu a:hover{ color: var(--kk-red); text-decoration: underline; }
.kk-footer-credit{ font-size: .85rem; color: var(--kk-ink-soft); margin-bottom: 4px; }
.kk-footer-made{ font-size: .8rem; color: var(--kk-ink-soft); }
.kk-footer-made a{ color: var(--kk-ink-soft); text-decoration: underline; }
.kk-footer-made a:hover{ color: var(--kk-red); }

/* ---------- tablet / desktop ---------- */
@media (min-width: 700px){
	.kk-hero{ flex-direction: row; align-items: flex-start; }
	.kk-hero > .kk-card--hero{ flex: 1 1 60%; min-width: 0; }
	.kk-hero-side{ flex: 1 1 40%; min-width: 0; }
	.kk-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px){
	.kk-nav-toggle, .kk-nav-mobile{ display: none; }
	.kk-nav-primary{ display: block; border-top: 1px solid var(--kk-line); }
	.kk-search-wrap{ display: block; }
	.kk-search-wrap:not(.is-open) .kk-search-form{ display: none; }
	.kk-search-wrap.is-open{ position: absolute; right: 16px; left: 16px; background: var(--kk-bg); box-shadow: 0 12px 24px rgba(0,0,0,.12); border-radius: 10px; padding: 10px; z-index: 20; }
	.kk-masthead{ position: relative; }
	.kk-masthead-inner{ padding: 18px 16px 6px; }
}

@media (min-width: 1000px){
	.kk-grid{ grid-template-columns: repeat(3, 1fr); }
	.kk-main{ padding-top: 26px; }
}

/* ============================================================
   PART 2 — the approved heritage design. Loaded last so it wins
   on shared elements (masthead, nav, footer, cards).
   ============================================================ */

:root{
  --maroon:#5A1116;
  --maroon-2:#6E1A1D;
  --maroon-d:#3A090D;
  --maroon-ink:#2A080B;
  --gold:#C39A4E;
  --gold-hi:#EFD8A6;
  --gold-dim:#9E7832;
  --pil:#CFBB92;
  --rule:#E0D4B8;
  --ivory:#F8F2E4;
  --paper:#FDFAF2;
  --stone:#7A7263;
  --ink:#1B1310;
  --ink-2:#4A3E35;
  --kn-serif:'Noto Serif Kannada','Nirmala UI','Tunga',serif;
  --kn-sans:'Noto Sans Kannada','Nirmala UI','Tunga',sans-serif;
  --lat:'Marcellus',Georgia,serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}
body{
  background:var(--ivory);color:var(--ink);font-family:var(--kn-sans);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* ivory zones carry the pilaster rhythm at the container edge */
.sheet{background:var(--ivory);position:relative;isolation:isolate}
.sheet::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.035;pointer-events:none;mix-blend-mode:multiply}
.sheet>.wrap{border-left:1px solid var(--pil);border-right:1px solid var(--pil);position:relative;z-index:1}

/* ───────── carved ornament ───────── */
/* a cornice is a hairline, a row of dentils, then a hairline — not a dashed rule */
.cornice{
  height:11px;position:relative;
  border-top:1px solid var(--gold-dim);border-bottom:1px solid var(--gold-dim);
  background-image:repeating-linear-gradient(90deg,var(--gold-dim) 0 2.5px,transparent 2.5px 7px);
  background-size:100% 4px;background-position:center;background-repeat:repeat-x;opacity:.82;
}
.cornice.on-dark{border-color:var(--gold);background-image:repeating-linear-gradient(90deg,var(--gold) 0 2.5px,transparent 2.5px 7px);opacity:.55}
.cornice.slim{height:6px;background-size:100% 2px;opacity:.6}
.pillar{position:relative;width:1px;background:var(--pil);align-self:stretch}
.pillar::before,.pillar::after{content:"";position:absolute;left:-5px;width:11px;height:3px;background:var(--gold-dim)}
.pillar::before{top:0}
.pillar::after{bottom:0}
/* stepped temple parapet: the maroon band reads as a structure under its roof */
.roofline{
  height:15px;background-color:var(--ivory);margin-bottom:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='15' viewBox='0 0 60 15'%3E%3Cpath d='M0 15v-4h9V8h9V5h24v3h9v3h9v4z' fill='%235A1116'/%3E%3Cpath d='M0 11h9V8h9V5h24v3h9v3h9' fill='none' stroke='%239E7832' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center bottom;
}

/* ───────── top strip ───────── */
.strip{background:var(--maroon-ink);color:#E4C898;font-size:11.5px;letter-spacing:.01em}
.strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;height:32px;border:0}
.strip .lat{font-family:var(--lat);letter-spacing:.2em;font-size:10px;color:var(--gold)}
.strip .dot{opacity:.4;padding:0 8px}

/* ───────── masthead ───────── */
.masthead{background:var(--paper);position:relative;isolation:isolate}
.masthead::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.04;pointer-events:none;mix-blend-mode:multiply}
.masthead .wrap{
  display:flex;align-items:center;justify-content:center;gap:24px;
  padding-top:22px;padding-bottom:20px;border:0;position:relative;z-index:1;
}
.masthead img.emblem{
  width:132px;height:132px;border-radius:50%;flex:none;background:#FFFDF6;padding:3px;
  box-shadow:0 2px 10px rgba(76,14,18,.2),0 0 0 1px rgba(201,166,99,.6);
}
.nameplate{min-width:0}
.wordmark{font-family:var(--kn-serif);font-weight:800;font-size:50px;line-height:1.16;letter-spacing:-.012em;color:var(--maroon);white-space:nowrap}
/* the editorial line, flanked by brass hairlines. Kannada is never tracked wide
   here — wide tracking breaks its clusters apart into loose syllables. */
.creed{margin-top:9px;display:flex;align-items:center;justify-content:center;gap:14px}
.creed .ln{height:1px;flex:none;width:52px;background:linear-gradient(90deg,var(--gold-dim),transparent)}
.creed .ln.l{background:linear-gradient(270deg,var(--gold-dim),transparent)}
.creed em{font-style:normal;font-size:12.5px;line-height:1.5;letter-spacing:.012em;color:var(--ink-2);white-space:nowrap}

/* ───────── nav: a colonnade of equal bays, one per section ───────── */
.nav{background:var(--maroon);position:relative;isolation:isolate;border-top:1px solid var(--gold-dim);border-bottom:1px solid var(--gold-dim)}
.nav::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.nav .wrap{border:0;position:relative;z-index:1}
.nav .navrail{display:flex;align-items:stretch;height:56px}
.nav a{
  display:flex;align-items:center;justify-content:center;position:relative;
  flex:1 1 0;min-width:0;padding:0 8px;
  font-weight:500;font-size:15.5px;line-height:1;
  color:#F0DEBE;letter-spacing:.004em;transition:color .18s;
}
.nav a:hover{color:var(--gold-hi)}
.nav a:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-4px;color:var(--gold-hi)}
/* the active bay is lit and stands on a brass plinth */
.nav a.on{color:var(--gold-hi);font-weight:600}
.nav a.on::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(239,216,166,.16),rgba(239,216,166,.02));
}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold)}
.nav a span{position:relative}
.navfade{display:none}

/* ───────── section heads ───────── */
.sechead{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.sechead h2{margin:0;font-family:var(--kn-serif);font-weight:700;font-size:23px;line-height:1.5;letter-spacing:0;color:var(--maroon);white-space:nowrap}
.sechead .mark{width:18px;height:14.2px;flex:none;color:var(--gold-dim);margin-top:2px}
.sechead .line{flex:1;height:4px;border-top:1px solid var(--pil);border-bottom:1px solid var(--pil);min-width:20px}
.sechead .more{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--maroon);font-weight:600;white-space:nowrap}
.sechead .more b{font-weight:600;border-bottom:1px solid var(--gold-dim);padding-bottom:2px}
.sechead.sub h2{font-size:17.5px}

/* ───────── arch frame ───────── */
.arch{
  position:relative;
  background:linear-gradient(168deg,#7E5620,#C9A663 22%,#7C5520 54%,#B99452 78%,#6F4A1B);
  padding:5px;-webkit-clip-path:url(#archClip);clip-path:url(#archClip);
}
.arch .inner{-webkit-clip-path:url(#archClip);clip-path:url(#archClip);background:var(--maroon-d);overflow:hidden}
.arch img{width:100%;height:100%;object-fit:cover;display:block}
.archwrap{position:relative;padding-top:28px}
.kalasha{position:absolute;left:50%;transform:translate(-50%,0);top:0;z-index:3;width:32px;color:#7E5620}

/* ───────── hero ───────── */
.hero{padding:36px 0 12px}
.hero .grid{display:grid;grid-template-columns:1fr 1px 348px;gap:0}
.hero .lead{padding-right:38px}
.hero .side{padding-left:38px}
.kicker{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--maroon);margin-bottom:11px}
.kicker .sq{width:5px;height:5px;background:var(--gold-dim);transform:rotate(45deg);flex:none}
.kicker .pl{color:var(--stone);font-weight:500}
.headrule{height:3px;background:var(--maroon);margin:26px 0 16px;width:72px}
h1.lead-h{font-family:var(--kn-serif);font-weight:700;font-size:37px;line-height:1.44;margin:14px 0 0;letter-spacing:-.005em;color:var(--ink)}
.dek{font-size:15.5px;line-height:1.88;color:var(--ink-2);margin:16px 0 0;max-width:64ch}
.byline{margin-top:18px;padding-top:12px;border-top:1px solid var(--rule);font-size:12px;color:var(--stone);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.byline b{color:var(--maroon);font-weight:600}
.byline .s{opacity:.4}

.sidestory{display:block;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--rule)}
.sidestory .ph{width:100%;height:158px;overflow:hidden;margin-bottom:14px;border:1px solid var(--pil);padding:4px;background:var(--paper)}
.sidestory .ph img{width:100%;height:100%;object-fit:cover}
.sidestory h3{font-family:var(--kn-serif);font-weight:600;font-size:19px;line-height:1.56;margin:0}
.sidestory .meta{margin-top:10px;font-size:11.5px;color:var(--stone)}
.sidelist a{display:block;padding:14px 0;border-bottom:1px solid var(--rule)}
.sidelist a:last-child{border-bottom:0;padding-bottom:0}
.sidelist .t{font-family:var(--kn-serif);font-size:15px;line-height:1.6;color:var(--ink)}
.sidelist .m{display:block;font-size:11px;color:var(--stone);margin-top:6px}

/* ───────── pillar row ───────── */
.pillars{padding:40px 0 44px}
.prow{display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;gap:0}
.pcol{padding:0 32px}
.pcol:first-child{padding-left:0}
.pcol:last-child{padding-right:0}
.pcol .ph{height:172px;overflow:hidden;background:var(--maroon-d);margin-bottom:16px;position:relative}
.pcol .ph img{width:100%;height:100%;object-fit:cover}
.pcol .ph.tall img{object-position:center 26%}
.pcol .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(158,120,50,.6)}
.pcol h3{font-family:var(--kn-serif);font-weight:600;font-size:18.5px;line-height:1.56;margin:0}
.pcol p{font-size:14px;line-height:1.86;color:var(--ink-2);margin:11px 0 0}
.pcol .meta{margin-top:13px;font-size:11.5px;color:var(--stone)}

/* ───────── culture band ───────── */
.band{background:var(--maroon);color:#F8F2E4;position:relative;isolation:isolate;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.08;mix-blend-mode:overlay;pointer-events:none}
.band .vig{position:absolute;inset:0;background:radial-gradient(120% 100% at 18% 0%,rgba(255,224,176,.1),transparent 56%);pointer-events:none}
.monolith{position:absolute;right:2.5%;bottom:26px;height:80%;width:auto;color:#F1D9AE;opacity:.07;pointer-events:none}
.band .wrap{position:relative;z-index:2;padding-top:48px;padding-bottom:52px;border:0}
.band .sechead h2{color:var(--gold-hi)}
.band .sechead .line{border-color:rgba(239,216,166,.3)}
.band .sechead .mark{color:var(--gold)}
.band .sechead .more{color:var(--gold-hi)}
.band .sechead .more b{border-bottom-color:rgba(239,216,166,.5)}
.bandgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:52px;align-items:start}
.bandgrid .portrait .inner{height:400px}
/* The arch takes the shape of the photograph it was given instead of forcing
   every photograph into one tall hole: kk_arch_ratio_style() sets --ar from
   the file's own proportions. The fixed height above is what browsers without
   aspect-ratio fall back to. */
@supports (aspect-ratio:1/1){
  .bandgrid .portrait .inner{height:auto;aspect-ratio:var(--ar,.75)}
}
.bandgrid .portrait .kalasha{color:var(--gold);opacity:.9}
.band h3.big{font-family:var(--kn-serif);font-weight:700;font-size:32px;line-height:1.46;margin:0;color:#FCF5E6}
.band .dek{color:rgba(248,242,228,.78);max-width:56ch}
/* the byline rule stops where the list below it stops: one right edge, and it
   no longer runs across the Bahubali silhouette */
.band .byline{border-top-color:rgba(239,216,166,.3);color:rgba(248,242,228,.62);max-width:620px}
.band .byline b{color:var(--gold-hi)}
.band .minilist{margin-top:30px;max-width:620px}
.band .minilist a{display:grid;grid-template-columns:26px minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:15px 0;border-top:1px solid rgba(239,216,166,.24)}
.band .minilist a:last-child{border-bottom:1px solid rgba(239,216,166,.24)}
.band .minilist .n{font-family:var(--lat);font-size:13px;color:var(--gold);letter-spacing:.02em}
.band .minilist .t{font-family:var(--kn-serif);font-size:15.5px;line-height:1.6;color:#F4EAD8}
.band .minilist .tag{font-size:11.5px;color:rgba(239,216,166,.68);white-space:nowrap}

/* ───────── lower ───────── */
.lower{padding:46px 0 52px}
.lgrid{display:grid;grid-template-columns:minmax(0,1fr) 1px 326px;gap:0}
.lmain{padding-right:40px}
.lside{padding-left:40px}
.pano{position:relative;border:1px solid var(--pil);padding:5px;background:var(--paper)}
.pano .in{overflow:hidden;height:218px;position:relative}
/* 218px against a 735px column is a letterbox slit. It kept 40% of the
   photograph, and the strip it kept was the middle, which on a picture of
   people is their chests. A 19:10 box keeps about three quarters, taken
   around the middle, which is where whoever framed the shot put the subject. */
@supports (aspect-ratio:1/1){
  .pano .in{height:auto;aspect-ratio:19/10;max-height:380px}
}
.pano img{width:100%;height:100%;object-fit:cover;object-position:center}
.pano .cap{position:absolute;left:0;right:0;bottom:0;padding:54px 26px 20px;background:linear-gradient(transparent,rgba(39,7,10,.4) 34%,rgba(39,7,10,.94));color:var(--ivory)}
.pano .cap .kicker{color:var(--gold-hi);margin-bottom:8px}
.pano .cap .kicker .sq{background:var(--gold)}
.pano .cap .kicker .pl{color:rgba(248,242,228,.72)}
.pano .cap h3{font-family:var(--kn-serif);font-weight:700;font-size:26px;line-height:1.44;margin:0;color:#FFF9EE;text-shadow:0 1px 10px rgba(39,7,10,.55)}
.lmain .lead-p{font-size:15px;line-height:1.9;color:var(--ink-2);margin:22px 0 0;columns:2;column-gap:40px;column-rule:1px solid var(--rule)}
.lmain .lead-p p{margin:0 0 14px}

/* the related strip sits inside the feature column, sized so the two columns
   of the lower grid finish within ~20px of each other instead of leaving a hole */
.related{margin-top:34px}
.bgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 30px}
.bgrid a{display:block;padding:16px 0 2px;border-top:1px solid var(--rule)}
.bgrid .t{font-family:var(--kn-serif);font-size:16px;line-height:1.6;color:var(--ink)}
.bgrid .m{display:block;font-size:11px;color:var(--stone);margin-top:7px}

.rl a{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;padding:15px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.rl a:first-child{border-top:1px solid var(--rule)}
.rl .n{font-family:var(--lat);font-size:14px;color:var(--gold-dim);letter-spacing:.02em}
.rl .t{font-family:var(--kn-serif);font-size:15px;line-height:1.6;color:var(--ink)}
.rl .m{display:block;font-family:var(--kn-sans);font-size:11px;color:var(--stone);margin-top:6px}

/* ───────── editorial credo: the page's closing note, full width ───────── */
.credo{background:var(--paper);border-top:1px solid var(--pil);position:relative;isolation:isolate}
.credo::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.04;pointer-events:none;mix-blend-mode:multiply}
.credo .wrap{position:relative;z-index:1;padding-top:40px;padding-bottom:42px;text-align:center;border:0}
.credo .kal{width:28px;margin:0 auto 16px;color:var(--gold-dim);opacity:.85;display:block}
/* Kannada is never tracked: .14em here split ಸಂಪಾದಕೀಯ into loose syllables */
.credo .lab{font-size:11.5px;letter-spacing:.02em;color:var(--maroon);font-weight:600;margin-bottom:16px}
.credo p{font-family:var(--kn-serif);font-size:23px;line-height:1.72;font-weight:500;margin:0 auto;max-width:21em;color:var(--ink)}
.credo .who{margin-top:18px;font-size:12px;color:var(--stone)}

/* ───────── footer ───────── */
.foot{background:var(--maroon-ink);color:rgba(248,242,228,.78);position:relative;isolation:isolate}
.foot::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.foot .wrap{position:relative;z-index:2;border:0}
.fgrid{display:grid;grid-template-columns:1.32fr 1fr 1fr;gap:52px;padding:46px 0 40px;align-items:start}
/* niche beside the blurb, not above it: all three columns then finish level */
.fbrand{display:flex;gap:22px;align-items:flex-start}
.fbrand .niche{flex:none;margin-bottom:0}
/* the brand name starts on the same line as the other two column heads —
   with padding here it sat 15px lower than them and read as a slip */
.fbrand .txt{padding-top:0;min-width:0}
/* the arch recurs at small scale: the emblem set in a niche */
.niche{width:122px;margin-bottom:20px}
.niche .archwrap{padding-top:17px}
.niche .arch{padding:2px;background:linear-gradient(168deg,#7E5620,#C9A663 24%,#7A5420 58%,#B18B4B)}
.niche .inner{height:132px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(180deg,#4C0E12,#2B070A)}
.niche .arch img{width:94px;height:94px;border-radius:50%;object-fit:contain;margin-bottom:12px;background:#FFFDF6;padding:3px}
.niche .kalasha{width:21px;color:var(--gold);opacity:.8}
.fgrid h4{font-family:var(--kn-serif);font-size:16px;font-weight:600;color:var(--gold-hi);margin:0 0 14px}
.fgrid p{font-size:13px;line-height:2;margin:0;max-width:38ch}
.fcolhead{font-family:var(--kn-serif);font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--gold);margin-bottom:14px}
.fgrid ul{list-style:none;margin:0;padding:0;font-size:13px;line-height:2.3}
.fgrid ul.two{columns:2;column-gap:20px}
.devby{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.06em;color:rgba(248,242,228,.6);font-family:var(--lat)}
.devby img{height:21px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.85;transition:opacity .2s}
.devby a:hover img{opacity:1}
.fbot{border-top:1px solid rgba(239,216,166,.22);padding:16px 0 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:11.5px;color:rgba(248,242,228,.55)}

/* ───────── tablet ───────── */
@media (max-width:1020px) and (min-width:861px){
  .wrap{padding:0 26px}
  .hero .grid{grid-template-columns:1fr 1px 296px}
  .hero .lead{padding-right:28px}
  .hero .side{padding-left:28px}
  .lgrid{grid-template-columns:minmax(0,1fr) 1px 280px}
  .lmain{padding-right:30px}
  .lside{padding-left:30px}
  .bandgrid{grid-template-columns:252px minmax(0,1fr);gap:36px}
  .nav a{padding:0 4px;font-size:14.5px}
  .wordmark{font-size:42px}
  h1.lead-h{font-size:32px}
  .bgrid{grid-template-columns:1fr 1fr}
  .credo p{font-size:21px}
}

/* ───────── mobile ─────────
   the temple language is kept but re-proportioned: the nameplate becomes a
   horizontal plinth (emblem + wordmark side by side under a cornice), the nav
   becomes a single scrolling colonnade, and every vertical pillar becomes a
   carved horizontal rule. */
@media (max-width:860px){
  .wrap{padding:0 18px}
  .sheet>.wrap{border-left:0;border-right:0}

  /* ── top rail: one line only. The domain lives in the footer, not here. ── */
  .strip{font-size:10.6px}
  .strip .wrap{height:30px;justify-content:center;text-align:center}
  .strip .r{display:none}
  .strip .dot{padding:0 7px}

  /* ── masthead: emblem + wordmark on one plinth ── */
  .masthead .wrap{gap:14px;padding-top:13px;padding-bottom:12px}
  .masthead img.emblem{width:88px;height:88px}
  .wordmark{font-size:32px;line-height:1.14;letter-spacing:-.016em}
  /* no stub rules here: a single hairline under the wordmark carries the creed */
  .creed{margin-top:7px;padding-top:7px;border-top:1px solid rgba(158,120,50,.42);
    justify-content:flex-start;gap:0}
  .creed .ln{display:none}
  .creed em{font-size:10.8px;letter-spacing:0;white-space:normal}

  /* ── nav: one scrolling line of bays, edge to edge ── */
  .nav .wrap{max-width:none;padding:0}
  /* The bar only. Selected on the bare class this also hit the stacked
     rail inside the hamburger panel, pinned it to 50px, and left four of
     its five links painted outside it and under the article below. */
  .nav .navrail{height:50px;justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scroll-padding-left:18px;
    scrollbar-width:none;-ms-overflow-style:none}
  .nav .navrail::-webkit-scrollbar{display:none}
  .nav a{flex:none;padding:0 14px;font-size:14.6px;scroll-snap-align:start;white-space:nowrap}
  /* the first bay bleeds to the screen edge; its label still lands on the 18px
     text column, so the menu lines up with the headlines underneath it */
  .nav a:first-child{padding-left:18px}
  .nav a:last-child{padding-right:46px}
  /* the brink that says the rail keeps going: the band darkens into shadow and
     a brass chevron points on. Without it the cut can land in a gap and the
     rail reads as a finished row of five. */
  .navfade{display:flex;align-items:center;justify-content:flex-end;
    position:absolute;top:1px;bottom:1px;right:0;width:58px;z-index:3;
    pointer-events:none;padding-right:11px;
    background:linear-gradient(90deg,rgba(90,17,22,0),rgba(74,13,18,.86) 44%,#470C11 80%)}
  .navfade::after{content:"";width:7px;height:7px;transform:rotate(45deg);
    border-top:1.6px solid var(--gold);border-right:1.6px solid var(--gold);opacity:.92}

  /* ── type ladder: lead ≫ section label ≫ card ≫ body ── */
  .sechead{gap:10px;margin-bottom:15px}
  .sechead h2{font-size:19px;line-height:1.5}
  .sechead.sub h2{font-size:16.5px}
  .sechead .mark{width:13px;height:10.2px}
  .sechead .more{font-size:11.5px}
  .roofline{height:13px;background-size:52px 13px}

  .hero{padding:12px 0 2px}
  .hero .grid{grid-template-columns:1fr}
  .hero .lead{padding-right:0}
  .hero .pillar{display:block;width:auto;height:1px;margin:24px 0;background:var(--pil);position:relative}
  .hero .pillar::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:-1px;width:34px;height:3px;background:var(--gold);opacity:.75}
  .hero .pillar::after{display:none}
  .hero .side{padding-left:0}
  h1.lead-h{font-size:28px;line-height:1.48;margin-top:10px;letter-spacing:-.004em}
  .kicker{font-size:11.5px;margin-bottom:9px}
  .headrule{margin:18px 0 13px;width:56px}
  .dek{font-size:14.4px;line-height:1.85;margin-top:13px}
  .byline{margin-top:14px;padding-top:11px}
  .archwrap{padding-top:21px}
  .kalasha{width:23px}
  .hero .lead .arch .inner{height:268px!important}

  /* side stories: a thumbnail you can actually read */
  .sidestory{display:grid;grid-template-columns:124px minmax(0,1fr);gap:15px;align-items:start;padding-bottom:17px;margin-bottom:17px}
  .sidestory .ph{height:92px;margin-bottom:0;padding:3px}
  .sidestory h3{font-size:16.5px;line-height:1.52}
  .sidestory .meta{margin-top:7px;font-size:11px}
  .sidelist a{padding:12px 0}
  .sidelist .t{font-size:15px;line-height:1.58}
  .sidelist .m{margin-top:5px}

  .pillars{padding:26px 0 28px}
  .prow{grid-template-columns:1fr}
  .prow .pillar{width:auto;height:1px;margin:22px 0}
  .prow .pillar::before{left:50%;transform:translateX(-50%);top:-1px;width:32px;height:3px}
  .prow .pillar::after{display:none}
  .pcol{padding:0}
  .pcol .ph{height:168px;margin-bottom:13px}
  .pcol h3{font-size:17.5px;line-height:1.52}
  .pcol p{font-size:13.8px;line-height:1.8;margin-top:9px}
  .pcol .meta{margin-top:10px}

  .band .wrap{padding-top:28px;padding-bottom:30px}
  .bandgrid{grid-template-columns:1fr;gap:22px}
  /* the portrait stays a niche, not a letterbox: keep it narrow and centred */
  .bandgrid .portrait{max-width:248px;margin:0 auto;width:100%}
  .band h3.big{font-size:23.5px;line-height:1.47}
  .monolith{right:2px;bottom:10px;height:248px;opacity:.07}
  .band .minilist{margin-top:20px}
  .band .minilist a{grid-template-columns:24px minmax(0,1fr);column-gap:11px;row-gap:5px;padding:12px 0}
  .band .minilist .n{font-size:12px}
  .band .minilist .t{font-size:15px;line-height:1.56}
  .band .minilist .tag{grid-column:2;font-size:11px}

  .lower{padding:28px 0 32px}
  .lgrid{grid-template-columns:1fr}
  .lmain{padding-right:0}
  .lgrid .pillar{display:block;width:auto;height:1px;margin:24px 0;background:var(--pil);position:relative}
  .lgrid .pillar::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:-1px;width:30px;height:3px;background:var(--gold);opacity:.72}
  .lgrid .pillar::after{display:none}
  .lside{padding-left:0}
  .pano{border:0;padding:0;background:none}
  .pano .in{border:1px solid var(--pil);padding:4px;background:var(--paper);height:auto}
  .pano .cap{position:static;padding:14px 0 0;background:none;color:var(--ink)}
  .pano .cap .kicker{color:var(--maroon)}
  .pano .cap .kicker .sq{background:var(--gold-dim)}
  .pano .cap .kicker .pl{color:var(--stone)}
  .pano .cap h3{font-size:19.5px;color:var(--ink);text-shadow:none;line-height:1.48}
  /* the sidebar's ಊರಿನಿಂದ list is the same three stories the ಊರ ಸುದ್ದಿ cards
     carry directly below it. Side by side on desktop that reads as an index;
     stacked on a phone it is the same headline twice in 300px, so it goes. */
  .side .sechead.sub,.sidelist{display:none}
  .lmain .lead-p{columns:1;font-size:14.2px;line-height:1.85;margin-top:15px}
  .lmain .lead-p p{margin-bottom:11px}
  .related{margin-top:26px}
  .bgrid{grid-template-columns:1fr;gap:0}
  .bgrid a{padding:13px 0 2px}
  .bgrid .t{font-size:15.5px;line-height:1.55}
  .rl a{padding:12px 0}
  .rl .t{font-size:15px;line-height:1.56}

  .credo .wrap{padding-top:30px;padding-bottom:32px}
  .credo .kal{width:23px;margin-bottom:13px}
  .credo .lab{margin-bottom:12px;font-size:10.5px}
  .credo p{font-size:18px;line-height:1.72;max-width:18em}
  .credo .who{margin-top:14px;font-size:11.5px}

  /* ── footer: three full-width bands. The sections become one wrapped row, so
        no column is left standing twice as tall as the one beside it. ── */
  .fgrid{grid-template-columns:1fr;gap:22px;padding:28px 0 22px}
  .fbrand{gap:17px}
  .fbrand .txt{padding-top:10px}
  .fgrid h4{margin-bottom:9px;font-size:15px}
  .fgrid p{font-size:12.5px;line-height:1.85;max-width:none}
  .fgrid ul{font-size:12.8px;line-height:2;overflow-wrap:anywhere}
  .fgrid ul.two{columns:auto;display:flex;flex-wrap:wrap;gap:3px 24px;line-height:1.9}
  .fcolhead{font-size:12.5px;margin-bottom:9px}
  .niche{width:94px;margin-bottom:14px}
  .niche .archwrap{padding-top:14px}
  .niche .inner{height:104px}
  .niche .arch img{width:74px;height:74px;margin-bottom:9px}
  .niche .kalasha{width:17px}
  .fbot{flex-direction:column;gap:9px;text-align:center;padding:14px 0 22px}
}
@media (max-width:392px){
  .masthead .wrap{gap:12px}
  .masthead img.emblem{width:82px;height:82px}
  .wordmark{font-size:29px}
  .creed em{font-size:10.2px}
  .nav a{font-size:14px;padding:0 12px}
  h1.lead-h{font-size:26.5px}
  .hero .lead .arch .inner{height:252px!important}
  .band h3.big{font-size:22px}
  .bandgrid .portrait{max-width:232px}
  .pcol .ph{height:158px}
  .sidestory{grid-template-columns:112px minmax(0,1fr);gap:13px}
  .sidestory .ph{height:84px}
  .sidestory h3{font-size:16px}
  .credo p{font-size:17px}
  .fgrid ul{font-size:12px}
}

/* ============================================================
   PART 3 — bridge rules for the WordPress port.
   The design mock had no mobile menu button, no search and no
   real links; these cover what the live site needs on top of it.
   ============================================================ */
.kk-skip-link{position:absolute;left:-9999px}
.kk-skip-link:focus{left:12px;top:12px;z-index:200;background:var(--maroon);color:var(--ivory);padding:10px 14px}
.masthead .wrap{position:relative}
.lead-h a,.sidestory h3 a,.pcol h3 a,.band h3.big a,.pano .cap h3 a{color:inherit}
.lead-h a:hover,.sidestory h3 a:hover,.pcol h3 a:hover,.pano .cap h3 a:hover{color:var(--maroon)}
.band h3.big a:hover{color:var(--gold-hi)}
.kk-empty{padding:60px 0;text-align:center;font-family:var(--kn-sans);color:var(--stone)}
.lside .sidelist{margin-bottom:22px}

/* mobile menu button: hidden on desktop, the design has the full rail there */
.kk-nav-toggle{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:44px;height:40px;border:1px solid var(--pil);background:transparent;cursor:pointer;padding:0}
.kk-nav-toggle span:not(.screen-reader-text){display:block;width:18px;height:1.6px;background:var(--maroon);margin:0 auto;
  box-shadow:0 -6px 0 var(--maroon),0 6px 0 var(--maroon)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kk-nav-mobile{display:none}
/* height:auto is not redundant. A stacked list is as tall as its links, and
   saying so here means no future rule about .navrail can flatten it again. */
.kk-nav-mobile .navrail--stack{display:flex;flex-direction:column;align-items:stretch;
  height:auto;min-height:0;overflow:visible;scroll-snap-type:none}
.kk-nav-mobile .navrail--stack a{padding:12px 0;border-bottom:1px solid var(--rule)}
.kk-nav-mobile form{margin:12px 0}
.kk-nav-mobile input[type="search"]{width:100%;padding:10px 12px;border:1px solid var(--pil);background:var(--paper);font-family:var(--kn-sans)}

@media (max-width:860px){
  .kk-nav-toggle{display:block}
  .nav{display:none}
  .kk-nav-mobile{display:block;background:var(--paper);border-bottom:1px solid var(--rule)}
  .kk-nav-mobile[hidden]{display:none}
}

/* ───────── picture boxes follow their width ─────────
   Measured at a 760px viewport before this block existed: the three-up row
   was showing 36% of each photograph and the lead arch 59%, because both are
   given a height in pixels while their width is fluid. A ratio holds at any
   width. Must stay last in the file: the heights it replaces live inside
   media queries, and those add no specificity to win on. */
@supports (aspect-ratio:1/1){
  /* 25:16 is the shape kk-lead is cut to, so the lead photograph arrives
     whole whatever the window is doing. !important beats the inline height
     the template prints, which is itself there to beat nothing in particular. */
  .hero .lead .arch .inner{height:auto!important;aspect-ratio:25/16}
  /* The row stacks to one column below 860px, so each card can be as wide as
     the page. The cap stops a full-width card photograph from running away
     with the screen on a tablet. */
  .pcol .ph{height:auto;aspect-ratio:16/10;max-height:460px}
}