/* ==========================================================================
   Ovih dana — design layer over News Magazine X.

   Loaded with newsx-main as a dependency, so it prints after the parent's
   generated <style id="newsx-main-inline-css"> block and wins order ties at
   equal specificity. That is why almost nothing here needs !important.

   Colour strategy: full palette, five roles. Warm paper and ink still carry
   the page; each section owns one low-chroma hue so a reader learns the
   section by its colour before reading its name. Chroma stays deliberately
   low because the brief for this site is bold, not loud: impact comes from
   typographic scale and heavy rules, never from saturation.

   Two tokens do the work. --od-sec is the hue for fills and rules; its
   companion --od-sec-text is the same hue darkened until it clears 4.5:1 on
   the paper, for anything set below display size. Both default to the logo
   orange at :root and are rebound by [data-od-sec], which templates print via
   od_sec_attr(). Everything downstream just reads the variable.
   ========================================================================== */

:root {
	/* Ground and ink. The brand's existing tones, unchanged. */
	--od-bg:       #FDFCFA;
	--od-beige:    #F3EEE4;
	--od-beige-2:  #E6E1D7;
	--od-beige-3:  #DED6C7;
	--od-ink:      #1B1D2A;
	--od-ink-2:    #3C3F4E;
	--od-muted:    #5B5E6E;
	--od-muted-2:  #8A8D9A;
	--od-paper:    #F7F4EE;  /* empty slots, faintest tone */
	--od-rule:     #C9C2B4;  /* dashed placeholder edges */
	--od-on-ink:   #C9CBD5;  /* body text on the ink block */

	/* Logo orange. It only reaches 2.8:1 on the paper, so the flat value is
	   for fills, rules and display type; -text is the readable cut. */
	--od-accent:      #D9832A;
	--od-accent-2:    #C2741F;
	--od-accent-text: #9C5310;  /* 5.6:1 on --od-bg, 4.9:1 on --od-beige */

	/* Section defaults, overridden per section below. */
	--od-sec:      var(--od-accent);
	--od-sec-text: var(--od-accent-text);
	--od-sec-tint: #FBF2E7;
	--od-sec-on:   var(--od-ink);

	--od-serif: "Vollkorn", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--od-sans:  "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;

	--od-container: 1280px;
	--od-gutter: 48px;
	--od-sidebar: 300px;

	--od-ease: cubic-bezier(.22, 1, .36, 1);
}

/* The five sections. -text is the hue darkened to clear 4.5:1 on the paper;
   -on is the text colour that sits on a filled block of the hue, tinted off
   pure white toward its own hue. Orange takes ink rather than white, being
   the one hue light enough that reversed white would fail. */
[data-od-sec="intervju"]     { --od-sec: #9B4722; --od-sec-text: #8F4120; --od-sec-tint: #F8EEE8; --od-sec-on: #FFFCF7; }
[data-od-sec="zabava"]       { --od-sec: #3E5A6E; --od-sec-text: #3A5567; --od-sec-tint: #EDF1F4; --od-sec-on: #FAFCFD; }
[data-od-sec="ovih-dana"]    { --od-sec: #D9832A; --od-sec-text: #9C5310; --od-sec-tint: #FBF2E7; --od-sec-on: #1B1D2A; }
[data-od-sec="dobre-vesti"]  { --od-sec: #6B7038; --od-sec-text: #5B5F2F; --od-sec-tint: #F1F2E7; --od-sec-on: #FDFDF6; }
[data-od-sec="ovog-vikenda"] { --od-sec: #8C3A52; --od-sec-text: #83364C; --od-sec-tint: #F9EBEF; --od-sec-on: #FFFAFB; }

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body,
body.home,
body.single,
body.archive {
	background: var(--od-bg);
	color: var(--od-ink);
	font-family: var(--od-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The parent sets a{color:accent} globally. Links are ink; accent is earned. */
a,
.od-main a {
	color: var(--od-ink);
	text-decoration: none;
	transition: color .18s var(--od-ease);
}

a:hover,
.od-main a:hover {
	color: var(--od-sec-text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--od-serif);
	color: var(--od-ink);
	letter-spacing: -.018em;
	margin: 0;
	/* balance, not pretty: these are short enough that evening the lines out
	   beats only fixing the last one, and Serbian headlines run long. */
	text-wrap: balance;
	/* Headlines here often open on „ — hang it so the text edge stays true. */
	hanging-punctuation: first last;
}

::selection { background: rgba(217, 131, 42, .24); color: var(--od-ink); }

img { max-width: 100%; height: auto; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--od-sec-text);
	outline-offset: 2px;
}

.od-container {
	max-width: var(--od-container);
	margin-inline: auto;
	padding-inline: var(--od-gutter);
}

.od-main { background: var(--od-bg); }

/* Ratio boxes. Every card image is cropped to the box so grids never go ragged. */
.od-media {
	position: relative;
	overflow: hidden;
	background: var(--od-beige);
}

.od-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--od-ease);
}

.od-card-link:hover .od-media img { transform: scale(1.03); }

/* The card is a single anchor, so a:hover would tint its meta line too.
   Only the headline responds; the furniture stays put. */
.od-card-link:hover { color: var(--od-ink); }

.od-card-link:hover .od-card-title,
.od-card-link:hover .od-lead-title,
.od-card-link:hover .od-split-title,
.od-card-link:hover .od-archive-title { color: var(--od-sec-text); }

.od-card-link:hover .od-card-meta,
.od-card-link:hover .od-lead-excerpt,
.od-card-link:hover .od-split-excerpt,
.od-card-link:hover .od-archive-excerpt,
.od-card-link:hover .od-byline { color: var(--od-muted); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	.od-card-link:hover .od-media img { transform: none; }
}

/* --------------------------------------------------------------------------
   2. Shared editorial furniture
   -------------------------------------------------------------------------- */

/* Labels run expanded. Archivo carries a width axis, and widening the caps
   rather than only tracking them is what stops these reading as a theme's
   default small-caps furniture. */
.od-label {
	font-family: var(--od-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .15em;
	font-stretch: 112%;
	text-transform: uppercase;
	color: var(--od-sec-text);
	display: inline-block;
}

/* Labels and section CTAs are usually links, and the `.od-main a` rule above
   outranks a bare class selector, so both were rendering ink. Restate them at a
   specificity that clears it. */
.od-main a.od-label,
a.od-label { color: var(--od-sec-text); }

.od-main a.od-label:hover,
a.od-label:hover { color: var(--od-ink); }

.od-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	font-size: 13px;
}

.od-eyebrow-center { justify-content: center; margin-top: 0; }

.od-eyebrow .od-label { font-size: 11.5px; }

.od-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--od-sec);
	flex: none;
}

.od-eyebrow-date {
	color: var(--od-muted);
	font-weight: 500;
}

/* Section head, broadsheet: a numbered chapter rule rather than a heading with
   a line under it. The rule is 3px in the section hue and runs the full width,
   so the colour registers as structure before any label is read. */
.od-sec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	border-bottom: 3px solid var(--od-sec);
	padding-bottom: 9px;
	margin-bottom: 26px;
}

.od-sec-title {
	display: flex;
	align-items: baseline;
	gap: 13px;
	font-family: var(--od-serif);
	font-size: clamp(25px, 1.1vw + 19px, 33px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.022em;
}

.od-sec-num {
	font-family: var(--od-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	font-stretch: 112%;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--od-sec-text);
	transform: translateY(-.55em);
	flex: none;
}

.od-sec-cta {
	font-family: var(--od-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	font-stretch: 112%;
	text-transform: uppercase;
	color: var(--od-sec-text);
	white-space: nowrap;
	padding-bottom: 2px;
}

.od-main a.od-sec-cta,
a.od-sec-cta { color: var(--od-sec-text); }

.od-main a.od-sec-cta:hover,
a.od-sec-cta:hover { color: var(--od-ink); }

.od-card-title {
	font-family: var(--od-serif);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.018em;
}

.od-card-meta {
	font-size: 13px;
	color: var(--od-muted);
	margin-top: 6px;
}

.od-section { margin-bottom: 48px; }

/* --------------------------------------------------------------------------
   3. Homepage — lead row
   -------------------------------------------------------------------------- */

.od-lead-row {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 40px;
	padding-top: 36px;
	padding-bottom: 44px;
}

.od-lead-title {
	font-size: clamp(31px, 3.1vw + 12px, 56px);
	line-height: 1.04;
	font-weight: 700;
	letter-spacing: -.026em;
	margin: 12px 0 14px;
}

.od-lead-excerpt {
	font-size: 18px;
	line-height: 1.5;
	color: var(--od-ink-2);
	margin: 0;
	text-wrap: pretty;
}

.od-byline {
	margin-top: 14px;
	font-size: 14px;
	color: var(--od-muted);
}

.od-author { color: var(--od-ink); font-weight: 600; }

.od-lead-side { display: flex; flex-direction: column; }

.od-card-list .od-card-link {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 18px;
}

.od-card-list { padding: 22px 0; border-bottom: 1px solid var(--od-beige-2); }
.od-card-list:first-child { padding-top: 0; }
.od-card-list:last-child { padding-bottom: 0; border-bottom: 0; }
.od-card-list .od-card-title { font-size: clamp(19px, .5vw + 17px, 23px); line-height: 1.18; font-weight: 700; margin: 7px 0 0; }
.od-card-list .od-card-meta { margin-top: 8px; }

/* --------------------------------------------------------------------------
   4. Homepage — body grid, sections
   -------------------------------------------------------------------------- */

.od-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--od-sidebar);
	gap: 48px;
	border-top: 1px solid var(--od-beige-2);
	padding-bottom: 48px;
}

.od-body-main { padding-top: 36px; min-width: 0; }

.od-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.od-card-grid .od-card-title { font-size: clamp(18px, .5vw + 16px, 22px); line-height: 1.2; font-weight: 700; margin: 12px 0 0; }

/* Ovog vikenda. The one filled block in the column, and the section whose hue
   is allowed to tint its own ground rather than only its rules. */
.od-weekend {
	background: var(--od-sec-tint);
	padding: clamp(26px, 2.4vw + 14px, 40px) clamp(22px, 2vw + 12px, 38px);
	border-top: 3px solid var(--od-sec);
}

.od-weekend-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	border-bottom: 3px solid var(--od-sec);
	padding-bottom: 9px;
	margin-bottom: 10px;
}

.od-weekend-range {
	font-family: var(--od-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	font-stretch: 112%;
	text-transform: uppercase;
	color: var(--od-sec-text);
	white-space: nowrap;
	padding-bottom: 2px;
}

.od-weekend-intro { margin: 0 0 20px; font-size: 15px; color: var(--od-muted); }

.od-weekend-rows { display: flex; flex-direction: column; }

.od-weekend-row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 16px 0;
	border-top: 1px solid var(--od-beige-3);
	border-top-color: color-mix(in srgb, var(--od-sec) 26%, transparent);
}

.od-weekend-row:last-child {
	border-bottom: 1px solid var(--od-beige-3);
	border-bottom-color: color-mix(in srgb, var(--od-sec) 26%, transparent);
}

.od-weekend-day { text-align: center; }

.od-weekend-abbr {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .15em;
	font-stretch: 112%;
	text-transform: uppercase;
	color: var(--od-sec-text);
}

.od-weekend-num {
	font-family: var(--od-serif);
	font-size: clamp(30px, 1vw + 24px, 38px);
	font-weight: 700;
	color: var(--od-sec-text);
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.od-weekend-title {
	font-family: var(--od-serif);
	font-weight: 700;
	font-size: clamp(18px, .5vw + 16px, 21px);
	line-height: 1.2;
	letter-spacing: -.018em;
}

.od-weekend-meta { font-size: 14px; color: var(--od-muted); margin-top: 3px; }

.od-weekend-cta {
	font-family: var(--od-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	font-stretch: 112%;
	text-transform: uppercase;
	color: var(--od-sec-text);
	white-space: nowrap;
	transition: transform .22s var(--od-ease);
}

/* The whole row is a link; give it somewhere to go on hover. */
.od-weekend-row:hover .od-weekend-title { color: var(--od-sec-text); }
.od-weekend-row:hover .od-weekend-cta { transform: translateX(3px); }

/* Zabava + Dobre vesti */
.od-two-col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin-bottom: 0;
}

.od-two-col .od-sec-title { font-size: 24px; }
.od-two-col .od-sec-head { margin-bottom: 20px; }

.od-card-feature { margin-bottom: 20px; }
.od-card-feature .od-card-title { font-size: 21px; line-height: 1.28; margin: 12px 0 0; }

.od-thumb-list { display: flex; flex-direction: column; }

.od-card-thumb { border-top: 1px solid var(--od-beige-2); padding: 12px 0; }

.od-card-thumb .od-card-link {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.od-card-thumb .od-card-title { font-size: 16px; line-height: 1.3; }

/* --------------------------------------------------------------------------
   5. Sidebar
   -------------------------------------------------------------------------- */

.od-sidebar {
	padding-top: 36px;
	display: flex;
	flex-direction: column;
	gap: 36px;
	min-width: 0;
}

.od-single .od-sidebar { padding-top: 0; }

.od-sidebar .widget,
.od-sidebar .newsx-widget { margin: 0; padding: 0; border: 0; background: none; }

.od-widget-title,
.od-sidebar .widget-title,
.od-sidebar .widgettitle {
	font-family: var(--od-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--od-ink);
	border-bottom: 2px solid var(--od-ink);
	padding-bottom: 8px;
	margin-bottom: 14px;
	background: none;
	text-transform: none;
	letter-spacing: 0;
}

/* Najčitanije */
.od-ranked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.od-ranked-item {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--od-beige-2);
	align-items: start;
}

.od-ranked-item:last-child { border-bottom: 0; }

.od-rank {
	font-family: var(--od-serif);
	font-size: 31px;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--od-accent-text);
	line-height: 1;
	/* Ranked lists and dates need even columns, not proportional figures. */
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.od-ranked-link {
	font-family: var(--od-serif);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
}

/* Sponsor slots. Never called "Reklama". */
.od-sponsor-label,
.od-sponsors-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--od-muted-2);
	margin-bottom: 10px;
}

/* Newsletter block */
.od-newsletter {
	background: var(--od-ink);
	color: var(--od-bg);
	padding: 26px 24px;
}

.od-newsletter-title {
	font-family: var(--od-serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--od-bg);
}

.od-newsletter p { font-size: 14px; line-height: 1.5; color: var(--od-on-ink); margin: 8px 0 16px; }

.od-newsletter input[type="email"] {
	width: 100%;
	height: 42px;
	border: 0;
	background: var(--od-bg);
	color: var(--od-ink);
	font-family: var(--od-sans);
	font-size: 14px;
	padding: 0 12px;
	border-radius: 0;
}

.od-newsletter button,
.od-newsletter input[type="submit"] {
	width: 100%;
	height: 42px;
	margin-top: 8px;
	border: 0;
	border-radius: 0;
	background: var(--od-accent);
	color: var(--od-ink);
	font-family: var(--od-sans);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background .18s var(--od-ease);
}

.od-newsletter button:hover,
.od-newsletter input[type="submit"]:hover { background: var(--od-accent-2); }

/* Instagram tiles */
.od-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.od-ig-grid > * { aspect-ratio: 1; background: var(--od-beige); display: block; overflow: hidden; }
.od-ig-grid img { width: 100%; height: 100%; object-fit: cover; }
.od-ig-handle { font-size: 13px; color: var(--od-muted); margin-top: 10px; }

/* --------------------------------------------------------------------------
   6. Bottom sponsor strip
   -------------------------------------------------------------------------- */

.od-sponsors {
	border-top: 1px solid var(--od-beige-2);
	padding-top: 28px;
	padding-bottom: 36px;
}

.od-sponsors .od-sponsors-label { text-align: center; margin-bottom: 14px; }

/* Centred flex rather than a six-column grid: the strip has to look composed
   with one partner as well as with six, and a fixed grid leaves a lone logo
   stranded at the left edge with five columns of air beside it. */
.od-sponsors-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 18px 36px;
}

/* Slots are sized by their artwork and capped, so one wide logo cannot run to
   the full measure and six still sit on one line. */
.od-sponsors-grid > * {
	flex: 0 1 auto;
	max-width: 190px;
}

.od-sponsor-slot img {
	display: block;
	height: 60px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .8;
	transition: filter .2s ease-out, opacity .2s ease-out;
}

.od-sponsor-slot:hover img { filter: grayscale(0); opacity: 1; }

.od-partner { display: block; }

/* --------------------------------------------------------------------------
   7. Category archive
   -------------------------------------------------------------------------- */

/* The archive header is the one place the section hue is allowed to take the
   whole surface. It is what makes five archives feel like five sections of one
   publication instead of five runs of the same template. */
.od-archive-head {
	background: var(--od-sec);
	color: var(--od-sec-on);
	padding: clamp(38px, 4vw + 14px, 72px) 0 clamp(30px, 3vw + 12px, 52px);
}

.od-archive-head .od-label,
.od-archive-head .od-archive-kicker { color: var(--od-sec-on); opacity: .82; }

.od-archive-kicker { font-size: 11px; }

/* In the kicker the numeral sits on the line rather than raised off it. */
.od-archive-kicker .od-sec-num { color: inherit; transform: none; margin-right: 11px; }

.od-main h1.od-archive-h1 {
	font-family: var(--od-serif);
	font-size: clamp(40px, 5.4vw, 78px);
	line-height: .96;
	font-weight: 700;
	letter-spacing: -.032em;
	color: var(--od-sec-on);
	margin: 14px 0 16px;
}

.od-archive-desc {
	font-size: clamp(17px, .6vw + 15px, 20px);
	line-height: 1.45;
	color: var(--od-sec-on);
	opacity: .88;
	margin: 0;
	max-width: 56ch;
	text-wrap: pretty;
}

.od-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.od-pill {
	font-size: 14px;
	font-weight: 600;
	padding: 8px 14px;
	border: 1px solid var(--od-ink);
	border-radius: 999px;
	color: var(--od-ink);
	line-height: 1.4;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	transition: background .18s var(--od-ease), color .18s var(--od-ease);
}

.od-pill:hover { background: var(--od-ink); color: var(--od-bg); }
.od-pill.is-active { background: var(--od-ink); color: var(--od-bg); }

/* On the filled band the pills invert: the outline is the reversed text colour
   and the active pill fills with it, dropping the hue back in as the label. */
.od-archive-head .od-pill { border-color: var(--od-sec-on); color: var(--od-sec-on); }
.od-archive-head .od-pill:hover,
.od-archive-head .od-pill.is-active { background: var(--od-sec-on); color: var(--od-sec); }

.od-archive-head + .od-body { border-top: 0; padding-top: 40px; }
.od-archive-head + .od-body .od-body-main { padding-top: 0; }
.od-archive-head + .od-body .od-sidebar { padding-top: 0; }

.od-card-split { padding-bottom: 36px; border-bottom: 1px solid var(--od-beige-2); margin-bottom: 36px; }

.od-card-split .od-card-link {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

.od-split-title {
	font-family: var(--od-serif);
	font-size: clamp(25px, 1.7vw + 15px, 38px);
	line-height: 1.06;
	font-weight: 700;
	letter-spacing: -.026em;
	margin: 12px 0 13px;
}

.od-split-excerpt { font-size: 17px; line-height: 1.5; color: var(--od-ink-2); margin: 0; }
.od-card-split .od-card-meta { margin-top: 12px; font-size: 14px; }

.od-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 28px;
}

.od-card-archive .od-label { margin-top: 14px; }

.od-archive-title {
	font-family: var(--od-serif);
	font-size: clamp(20px, .7vw + 17px, 24px);
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 7px 0 8px;
}

.od-archive-excerpt { font-size: 15px; line-height: 1.5; color: var(--od-muted); margin: 0; }

.od-empty { font-size: 17px; color: var(--od-muted); padding: 32px 0; }

/* Pagination: square 40px cells, ink fill on the current page. */
.od-pagination {
	font-variant-numeric: lining-nums tabular-nums;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 44px;
	font-size: 15px;
	font-weight: 600;
}

.od-pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--od-beige-2);
	color: var(--od-ink);
	border-radius: 0;
	padding: 0 6px;
	background: none;
	transition: border-color .18s ease-out, background .18s ease-out, color .18s ease-out;
}

.od-pagination .page-numbers:hover { border-color: var(--od-sec); color: var(--od-sec-text); }

.od-pagination .page-numbers.current {
	background: var(--od-ink);
	border-color: var(--od-ink);
	color: var(--od-bg);
}

.od-pagination .next,
.od-pagination .prev { padding: 0 16px; }

.od-pagination .dots { border-color: transparent; }

/* --------------------------------------------------------------------------
   8. Single story
   -------------------------------------------------------------------------- */

.od-article-head {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 24px 0;
	text-align: center;
}

.od-main h1.od-article-h1 {
	font-family: var(--od-serif);
	font-size: clamp(33px, 4.4vw, 66px);
	line-height: 1.0;
	font-weight: 700;
	letter-spacing: -.032em;
	margin: 18px 0 20px;
}

.od-standfirst {
	font-family: var(--od-serif);
	font-size: clamp(18px, .8vw + 15px, 23px);
	line-height: 1.4;
	font-style: italic;
	color: var(--od-ink-2);
	margin: 0 auto;
	max-width: 640px;
	text-wrap: pretty;
}

.od-article-byline {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	font-size: 14px;
	color: var(--od-muted);
}

.od-avatar { border-radius: 50%; width: 36px; height: 36px; }
.od-avatar-lg { border-radius: 50%; width: 64px; height: 64px; }

.od-hero { max-width: 1060px; margin: 36px auto 0; padding: 0 24px; }
.od-caption { font-size: 13px; color: var(--od-muted-2); margin-top: 10px; }

.od-article-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--od-sidebar);
	gap: 56px;
	max-width: 1060px;
	margin: 40px auto 0;
	padding: 0 24px 56px;
}

.od-article {
	font-family: var(--od-serif);
	font-size: 20px;
	line-height: 1.65;
	color: var(--od-ink);
	max-width: 680px;
	min-width: 0;
	hanging-punctuation: first last;
}

.od-article p { margin: 0 0 26px; }

/* Drop cap on the opening paragraph only. */
.od-article > p:first-of-type::first-letter {
	float: left;
	font-size: 78px;
	line-height: .78;
	font-weight: 700;
	color: var(--od-sec);
	margin: 8px 12px 0 0;
}

.od-article h2 { font-size: 28px; line-height: 1.25; font-weight: 600; margin: 40px 0 14px; }
.od-article h3 { font-size: 23px; line-height: 1.3; font-weight: 600; margin: 32px 0 12px; }

.od-article ul,
.od-article ol { margin: 0 0 26px; padding-left: 1.3em; }
.od-article li { margin-bottom: 8px; }

.od-article a { color: var(--od-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--od-beige-3); }
.od-article a:hover { color: var(--od-sec-text); text-decoration-color: var(--od-sec); }

.od-article blockquote,
.od-article .wp-block-quote {
	margin: 44px 0;
	padding: 22px 0 0;
	border: 0;
	border-top: 3px solid var(--od-sec);
	background: none;
	font-size: clamp(22px, 1.1vw + 17px, 30px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.024em;
	color: var(--od-ink);
	font-style: normal;
	text-wrap: balance;
}

.od-article blockquote p { margin: 0; font-size: inherit; }
.od-article blockquote cite { display: block; margin-top: 14px; font-family: var(--od-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; font-stretch: 112%; text-transform: uppercase; font-style: normal; color: var(--od-sec-text); }

.od-article figure,
.od-article .wp-block-image { margin: 36px 0; }

.od-article figcaption,
.od-article .wp-caption-text {
	font-family: var(--od-sans);
	font-size: 13px;
	color: var(--od-muted-2);
	margin-top: 10px;
	text-align: left;
}

/* Tags, share, author box */
.od-tags {
	font-family: var(--od-sans);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--od-beige-2);
}

.od-tag {
	font-size: 13px;
	padding: 6px 12px;
	background: var(--od-beige);
	border-radius: 999px;
	color: var(--od-ink);
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}

.od-tag:hover { background: var(--od-sec-tint); color: var(--od-sec-text); }

.od-share {
	font-family: var(--od-sans);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 20px;
	font-size: 14px;
	color: var(--od-muted);
}

.od-share-btn {
	padding: 10px 14px;
	border: 1px solid var(--od-ink);
	border-radius: 0;
	background: none;
	font-family: var(--od-sans);
	font-weight: 600;
	font-size: 14px;
	color: var(--od-ink);
	cursor: pointer;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	transition: background .18s var(--od-ease), color .18s var(--od-ease);
}

.od-share-btn:hover { background: var(--od-ink); color: var(--od-bg); }
.od-share-btn.is-done { background: var(--od-sec); border-color: var(--od-sec); color: var(--od-sec-on); }

.od-author-box {
	font-family: var(--od-sans);
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 18px;
	margin-top: 40px;
	padding: 24px;
	background: var(--od-sec-tint);
	border-top: 2px solid var(--od-sec);
}

.od-author-name { font-weight: 600; font-size: 16px; }
.od-author-bio { font-size: 15px; line-height: 1.5; color: var(--od-muted); margin: 4px 0 0; }

/* Prev / next band */
.od-prevnext {
	border-top: 1px solid var(--od-beige-2);
	background: var(--od-beige);
	padding: 32px 0;
}

.od-prevnext-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.od-prevnext-right { text-align: right; }

.od-prevnext-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--od-muted-2);
}

.od-prevnext-title {
	display: block;
	font-family: var(--od-serif);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   9. Parent header / footer overrides
   -------------------------------------------------------------------------- */

.newsx-site-header { background: var(--od-bg); border: 0; }

.newsx-site-header .newsx-container,
.newsx-site-footer .newsx-container {
	max-width: var(--od-container);
	padding-inline: var(--od-gutter);
}

/* Top row: date left, secondary menu right, hairline under.
   Scoped to .newsx-site-header to match the parent's own specificity. */
.newsx-site-header .newsx-top-section-wrap {
	background: var(--od-bg);
	border-bottom: 1px solid var(--od-beige-2);
	font-size: 13px;
	color: var(--od-muted);
}

.newsx-site-header .newsx-top-section-wrap .newsx-builder-grid-row { min-height: 38px; }
.newsx-site-header .newsx-top-section-wrap a { color: var(--od-muted); font-size: 13px; }
.newsx-site-header .newsx-top-section-wrap a:hover { color: var(--od-accent-text); }
.newsx-site-header .newsx-top-section-wrap .newsx-nav-menu a { text-transform: none; font-weight: 400; letter-spacing: 0; }

/* Middle row: the logo, centred. */
.newsx-site-header .newsx-middle-section-wrap { background: var(--od-bg); padding: 26px 0 18px; }
.newsx-site-header .site-logo img,
.newsx-site-header .custom-logo { height: 120px; width: auto; max-height: 120px; }
.newsx-site-identity { justify-content: center; }

/* Bottom row: primary menu centred between an ink rule and a hairline. */
.newsx-site-header .newsx-bottom-section-wrap {
	background: var(--od-bg);
	border-top: 1px solid var(--od-ink);
	border-bottom: 1px solid var(--od-beige-2);
}

.newsx-site-header .newsx-bottom-section-wrap .newsx-builder-grid-row { min-height: 52px; }

.newsx-nav-menu > li > a,
.newsx-desktop-menu > li > a {
	font-family: var(--od-sans);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--od-ink);
	padding: 0 18px;
	line-height: 52px;
	min-height: 44px;
}

.newsx-nav-menu > li > a:hover { color: var(--od-accent-text); }

.newsx-nav-menu > li.current-menu-item > a,
.newsx-nav-menu > li.current-category-ancestor > a,
.newsx-nav-menu > li.current-menu-parent > a {
	color: var(--od-accent-text);
	box-shadow: inset 0 -3px 0 var(--od-accent);
}

.newsx-nav-menu .sub-menu {
	background: var(--od-bg);
	border: 1px solid var(--od-beige-2);
	border-top: 2px solid var(--od-accent);
	border-radius: 0;
	box-shadow: none;
}

.newsx-nav-menu .sub-menu a { text-transform: none; font-size: 15px; line-height: 1.4; padding: 10px 16px; }

/* Header icons */
.newsx-site-header svg { fill: var(--od-ink); }
.newsx-site-header .newsx-social-icon:hover svg,
.newsx-header-search .search-icon svg:hover { fill: var(--od-accent-text); }

/* The parent styles the top row for an accent-filled bar and paints its text
   white. That row is cream now. Its own rule is
   .newsx-top-section-wrap .newsx-header-menu-secondary .newsx-nav-menu > .menu-item > a
   (0,4,1), so these have to be at least as specific. */
.newsx-site-header .newsx-top-section-wrap .newsx-header-menu-secondary .newsx-nav-menu > .menu-item > a,
.newsx-site-header .newsx-top-section-wrap .newsx-date-and-time,
.newsx-site-header .newsx-top-section-wrap .newsx-date-and-time span {
	color: var(--od-muted);
	font-size: 13px;
}

.newsx-site-header .newsx-top-section-wrap .newsx-header-menu-secondary .newsx-nav-menu > .menu-item > a:hover {
	color: var(--od-accent-text);
}

.newsx-site-header .newsx-top-section-wrap svg { fill: var(--od-muted); }

/* The utility bar is 38px; the primary nav's 52px line-height must not leak in. */
.newsx-site-header .newsx-top-section-wrap .newsx-header-menu-secondary .newsx-nav-menu > .menu-item > a {
	line-height: 18px;
	min-height: 0;
	padding: 10px 0 10px 22px;
	box-shadow: none;
}

/* The free footer's bottom row holds only the copyright field, so the legal
   links ride along inside it. */
.newsx-site-footer .newsx-copyright {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.newsx-site-footer .od-legal { display: flex; gap: 16px; }
.newsx-site-footer .od-legal a { color: var(--od-muted-2); }
.newsx-site-footer .od-legal a:hover { color: var(--od-accent-text); }

/* Things the brief removes. Also switched off in the Customizer; this is the
   belt to that pair of braces, and covers markup the options leave behind. */
.newsx-news-ticker,
.newsx-header-news-ticker,
.newsx-dark-mode-switcher,
.newsx-random-post,
.newsx-reading-progress-bar,
.newsx-post-views,
.newsx-breaking-news { display: none !important; }

/* Footer */
.newsx-site-footer { background: var(--od-beige); border-top: 1px solid var(--od-beige-2); color: var(--od-ink); }
.newsx-site-footer a { color: var(--od-ink); font-size: 15px; }
.newsx-site-footer a:hover { color: var(--od-accent-text); }

.newsx-site-footer .newsx-middle-section-wrap { background: transparent; padding: 44px 0 28px; }
.newsx-site-footer .newsx-bottom-section-wrap {
	background: transparent;
	border-top: 1px solid var(--od-beige-3);
	border-bottom: 0;
	font-size: 13px;
	color: var(--od-muted-2);
	padding: 16px 0 28px;
}

.newsx-site-footer .newsx-bottom-section-wrap a { color: var(--od-muted-2); font-size: 13px; }
.newsx-site-footer .widget-title,
.newsx-site-footer .widgettitle,
.newsx-site-footer .newsx-widget-title-text {
	font-family: var(--od-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--od-ink);
	border: 0;
	background: none;
	margin-bottom: 12px;
	padding: 0;
}

.newsx-site-footer .newsx-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.newsx-site-footer p { font-size: 14px; line-height: 1.55; color: var(--od-muted); }
.newsx-site-footer img { max-height: 64px; width: auto; }

/* Back to top */
#newsx-back-to-top {
	background: var(--od-ink);
	border-radius: 0;
	border: 0;
}

#newsx-back-to-top svg { fill: var(--od-bg); }

/* Kill the parent's decorative widget-title bar inside our sidebar. */
.od-sidebar .newsx-widget-title-wrap { border: 0; padding: 0; }
.od-sidebar .newsx-widget-title-text { background: none; color: var(--od-ink); padding: 0; }

/* --------------------------------------------------------------------------
   9b. Widget chrome: sponsor slots, footer columns, contact blocks
   -------------------------------------------------------------------------- */

/* Sponsor placeholders. An empty slot says it is empty rather than faking a
   partner, and links to the page explaining how to become one. */
.od-sponsor-box {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 250px;
	padding: 16px;
	border: 1px dashed var(--od-rule);
	background: var(--od-paper);
	font-family: var(--od-sans);
	font-size: 12px;
	line-height: 1.55;
	color: var(--od-muted-2);
	transition: border-color .18s var(--od-ease), color .18s var(--od-ease);
}

.od-sponsor-box:hover { border-color: var(--od-accent); color: var(--od-muted); }

.od-sponsor-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	border: 1px dashed var(--od-rule);
	background: var(--od-paper);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--od-muted-2);
	transition: border-color .18s var(--od-ease), color .18s var(--od-ease);
}

.od-sponsor-logo:hover { border-color: var(--od-accent); color: var(--od-muted); }

.od-newsletter-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }

/* Footer columns */
.newsx-site-footer .od-foot-logo { display: inline-block; margin-bottom: 10px; }
.newsx-site-footer .od-foot-logo img { height: 64px; width: auto; max-height: 64px; }

.newsx-site-footer .od-foot-title {
	font-family: var(--od-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--od-ink);
	margin-bottom: 12px;
}

.newsx-site-footer .od-foot-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.newsx-site-footer .od-foot-list a { font-size: 15px; color: var(--od-ink); }
.newsx-site-footer .od-foot-list a:hover { color: var(--od-accent-text); }
.newsx-site-footer .custom_html-widget p { max-width: 320px; margin: 0; }
.newsx-site-footer .newsx-copyright { font-size: 13px; color: var(--od-muted-2); }
.newsx-site-footer .newsx-copyright a { font-size: 13px; color: var(--od-muted-2); }

/* Contact blocks on the Kontakt and Pošalji priču pages. */
.od-mailto {
	border-top: 1px solid var(--od-beige-2);
	padding-top: 16px;
	margin-bottom: 20px;
	font-family: var(--od-sans);
}

.od-mailto strong {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--od-muted-2);
	margin-bottom: 6px;
}

.od-mailto a {
	font-family: var(--od-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--od-ink);
	text-decoration: none;
}

.od-mailto a:hover { color: var(--od-accent-text); }
.od-mailto span { display: block; font-size: 14px; color: var(--od-muted); margin-top: 4px; }

/* Static page body, which renders through the parent's page template. */
.newsx-default-page-wrap .newsx-post-content,
.newsx-single-page-wrap .newsx-post-content,
.page .newsx-post-content {
	font-family: var(--od-serif);
	font-size: 19px;
	line-height: 1.65;
	color: var(--od-ink);
	max-width: 680px;
}

.page .newsx-post-content h2 {
	font-size: 26px;
	line-height: 1.25;
	font-weight: 600;
	margin: 36px 0 12px;
}

.page .newsx-post-content ul { padding-left: 1.2em; }
.page .newsx-post-content li { margin-bottom: 8px; }

/* Defensive: the parent paints menu links white in one of its header contexts. */
.newsx-site-header .newsx-desktop-menu > li > a { color: var(--od-ink); }
.newsx-site-header .newsx-desktop-menu > li > a:hover { color: var(--od-accent-text); }

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	:root { --od-gutter: 32px; }
	.od-lead-title { font-size: 36px; }
	.od-main h1.od-archive-h1 { font-size: 46px; }
	.od-main h1.od-article-h1 { font-size: 40px; }
}

@media (max-width: 1024px) {
	.od-lead-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.od-body,
	.od-article-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	/* Once the sidebar drops below, centre it rather than leaving it hard left. */
	.od-sidebar { padding-top: 0; max-width: 640px; margin-inline: auto; }
	.od-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.od-two-col { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	/* The measure stays capped when the sidebar drops: at 900px an uncapped
	   column runs to ~86 characters, well past comfortable reading. */
	.od-article { max-width: 680px; margin-inline: auto; }
	.od-mailto a { font-size: 20px; }
	.newsx-site-header .site-logo img,
	.newsx-site-header .custom-logo { height: 92px; max-height: 92px; }
}

@media (max-width: 640px) {
	:root { --od-gutter: 20px; }

	/* Sections breathe less on a narrow screen; 48px reads as a gap, not a beat. */
	.od-section { margin-bottom: 40px; }
	.od-article p { margin-bottom: 22px; }
	.newsx-site-footer .newsx-copyright { justify-content: flex-start; }

	.od-lead-title { font-size: 30px; }
	.od-lead-excerpt { font-size: 17px; }

	.od-card-list .od-card-link { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
	.od-card-list .od-card-title { font-size: 18px; }

	.od-grid-3,
	.od-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }

	.od-weekend { padding: 24px 20px; }
	.od-weekend-head { flex-direction: column; align-items: flex-start; gap: 2px; }
	/* The brief keeps the three-column day | text | arrow row on mobile. */
	.od-weekend-row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; }
	.od-weekend-num { font-size: 24px; }
	.od-weekend-title { font-size: 17px; }
	.od-weekend-cta { font-size: 0; }
	.od-weekend-cta::after { content: "→"; font-size: 16px; }

	.od-card-split .od-card-link { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.od-split-title { font-size: 26px; }

	.od-archive-head { padding: 32px 0 28px; }
	.od-main h1.od-archive-h1 { font-size: 34px; }
	.od-archive-desc { font-size: 17px; }

	.od-article-head { padding: 36px var(--od-gutter) 0; }
	.od-main h1.od-article-h1 { font-size: 32px; line-height: 1.12; letter-spacing: -.02em; }
	.od-standfirst { font-size: 19px; line-height: 1.4; }
	.od-hero { padding: 0 var(--od-gutter); margin-top: 24px; }
	.od-article-body { padding: 0 var(--od-gutter) 40px; margin-top: 28px; }
	.od-article { font-size: 18px; }
	.od-article > p:first-of-type::first-letter { font-size: 58px; }
	.od-article blockquote { font-size: 21px; padding: 18px 0 0; }

	.od-author-box { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 20px; }
	.od-avatar-lg { width: 48px; height: 48px; }

	.od-prevnext-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.od-prevnext-right { text-align: left; }
	.od-prevnext-title { font-size: 18px; }


	.newsx-site-header .newsx-middle-section-wrap { padding: 10px 0 8px; }
	.newsx-site-header .site-logo img,
	.newsx-site-header .custom-logo { height: 54px; max-height: 54px; }
	.newsx-site-header .newsx-top-section-wrap { font-size: 12px; }
	/* Roomier tap targets once this bar carries the only secondary links. */
	.newsx-site-header .newsx-top-section-wrap .newsx-header-menu-secondary .newsx-nav-menu > .menu-item > a {
		padding: 13px 0 13px 16px;
	}
}