/* =========================================================================
   Cruise & maritime incident feed — "Regions" (approved Sep 2026)
   Used by templates/template-cruise-feed.php and single-cruise-feed.php.
   Light by default; dark styles apply when <html data-theme="dark"> is set by
   the site-wide theme switch. Desktop from 900px; mobile below.
   ========================================================================= */

.ccl-cf {
	--cf-ground: #FFFFFF;
	--cf-ink: #0B1220;
	--cf-sec: #4A5261;
	--cf-mut: #6B7280;
	--cf-teal: #0D5C63;
	--cf-line: #0B1220;
	--cf-panel: #FFFFFF;
	--cf-in-b: rgba(11, 18, 32, .45);
	--cf-out-b: #C9D3E0;
	--cf-off-b: rgba(11, 18, 32, .14);
	--cf-blue: #1D63FF;
	--cf-blue-h: #1550D9;
	--cf-focus: #1D63FF;
	--cf-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--cf-display: 'Schibsted Grotesk', 'Archivo', system-ui, sans-serif;
	--cf-label: 'Archivo', 'Inter Tight', system-ui, sans-serif;
	--cf-pad: clamp(24px, 5.5556vw, 80px);

	background: var(--cf-ground);
	color: var(--cf-ink);
	font-family: var(--cf-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	color-scheme: light;
}

html[data-theme="dark"] .ccl-cf {
	--cf-ground: #0B1220;
	--cf-ink: #F1F5F9;
	--cf-sec: #A9B4C4;
	--cf-mut: #9AA3B2;
	--cf-teal: #5CC8C0;
	--cf-line: #F1F5F9;
	--cf-panel: #111A2B;
	--cf-in-b: rgba(255, 255, 255, .28);
	--cf-out-b: rgba(255, 255, 255, .30);
	--cf-off-b: rgba(241, 245, 249, .14);
	--cf-focus: #8FB2FF;
	color-scheme: dark;
}

/* ---------- Base (kept inside the feed so the theme is untouched) ---------- */
.ccl-cf *,
.ccl-cf *::before,
.ccl-cf *::after { box-sizing: border-box; }
.ccl-cf h1, .ccl-cf h2, .ccl-cf h3, .ccl-cf h4 { margin: 0; padding: 0; color: inherit; font-family: var(--cf-display); font-weight: 700; text-transform: none; letter-spacing: normal; }
.ccl-cf p, .ccl-cf dl, .ccl-cf dd, .ccl-cf dt, .ccl-cf figure, .ccl-cf blockquote { margin: 0; }
.ccl-cf ul, .ccl-cf ol { margin: 0; padding: 0; list-style: none; }
.ccl-cf li { margin: 0; }
.ccl-cf a { color: inherit; text-decoration: none; }
.ccl-cf a:focus-visible,
.ccl-cf button:focus-visible,
.ccl-cf select:focus-visible { outline: 3px solid var(--cf-focus); outline-offset: 2px; }
.ccl-cf svg { flex: none; }
.ccl-cf .cf-ic { display: block; }
.ccl-cf button, .ccl-cf select { font-family: inherit; }
.ccl-cf .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ccl-cf .cf-nowrap { white-space: nowrap; }

.cf-wrap { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: var(--cf-pad); padding-right: var(--cf-pad); }
.cf-main { display: flex; flex-direction: column; padding-bottom: 136px; }

.ccl-cf .cf-label {
	font-family: var(--cf-label);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cf-ink);
}
.ccl-cf .cf-h2 { font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.03em; }

/* ---------- Breadcrumb / back link ---------- */
.cf-crumbs { padding-top: 22px; }
.cf-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; line-height: 1.4; color: var(--cf-sec); }
.cf-crumbs a { color: var(--cf-ink); }
.cf-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ccl-cf .cf-back { display: flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--cf-ink); }
.cf-back .cf-ic { color: var(--cf-ink); }

/* ---------- Kicker ---------- */
.ccl-cf .cf-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-family: var(--cf-label);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cf-teal);
}
.cf-kseg { display: inline-flex; align-items: center; gap: 14px; }
.cf-dash { display: block; flex: none; width: 24px; height: 1px; background: currentColor; }

/* =========================================================================
   Feed home and category pages
   ========================================================================= */
.cf-hero { padding-top: 88px; display: flex; flex-direction: column; gap: 32px; }
.ccl-cf .cf-h1 { font-weight: 800; font-size: min(128px, 8.9vw); line-height: .9; letter-spacing: -.05em; color: var(--cf-ink); }
.cf-hero-grid {
	margin-top: 40px;
	border-top: 1px solid var(--cf-line);
	padding-top: 24px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
}
.ccl-cf .cf-lead { grid-column: 1 / span 6; font-family: var(--cf-display); font-weight: 500; font-size: 28px; line-height: 1.25; letter-spacing: -.015em; }
.cf-hero-about { grid-column: 7 / span 3; display: flex; flex-direction: column; gap: 12px; }
.cf-hero-about p { font-size: 15.5px; line-height: 1.55; color: var(--cf-sec); }
.cf-filed { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.4; color: var(--cf-sec); }
.cf-stat { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 10px; }
.ccl-cf .cf-stat-n { font-family: var(--cf-display); font-weight: 800; font-size: 96px; line-height: .8; letter-spacing: -.05em; }
.ccl-cf .cf-stat-n--teal { color: var(--cf-teal); }
.cf-stat-t { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ccl-cf .cf-stat-sub { font-size: 14px; line-height: 1.4; color: var(--cf-sec); }
.ccl-cf .cf-stat-link { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.cf-stat-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Browse: category, region and sort lists */
.cf-browse { margin-top: 104px; }
.cf-browse-in {
	border-top: 1px solid var(--cf-line);
	padding-top: 22px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
}
.cf-bcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cf-bcol--cat { grid-column: 1 / span 5; }
.cf-bcol--reg { grid-column: 6 / span 4; }
.cf-bcol--sort { grid-column: 10 / span 3; }
.cf-opts { display: flex; flex-direction: column; }
.cf-opts--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 24px; }
.ccl-cf .cf-opt { display: flex; align-items: center; gap: 14px; min-height: 44px; color: var(--cf-ink); }
.cf-opt-n { flex: none; width: 30px; font-family: var(--cf-display); font-weight: 700; font-size: 13px; color: var(--cf-sec); }
.cf-opt-t { font-family: var(--cf-display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.cf-opt:hover .cf-opt-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ccl-cf .cf-opt.is-on { color: var(--cf-teal); }
.cf-opt.is-on .cf-opt-n { color: var(--cf-teal); }
.cf-opt.is-on .cf-opt-t { font-weight: 700; }
.cf-opt.is-on::after { content: ""; flex: none; width: 32px; height: 2px; background: var(--cf-teal); }

/* Latest incidents */
.cf-latest { margin-top: 88px; }
.cf-latest-head {
	border-top: 2px solid var(--cf-line);
	padding: 22px 0 20px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: end;
}
.cf-latest-head .cf-h2 { grid-column: 1 / span 8; }
.ccl-cf .cf-showing { font-size: 15px; line-height: 1.4; color: var(--cf-sec); }
.cf-latest-head .cf-showing { grid-column: 10 / span 3; text-align: right; }
.cf-colhead {
	border-top: 1px solid var(--cf-line);
	border-bottom: 1px solid var(--cf-line);
	padding: 12px 0;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	font-family: var(--cf-label);
	font-weight: 700;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cf-sec);
}
.cf-colhead span:nth-child(1) { grid-column: 1 / span 2; }
.cf-colhead span:nth-child(2) { grid-column: 3 / span 5; }
.cf-colhead span:nth-child(3) { grid-column: 8 / span 3; }
.cf-colhead span:nth-child(4) { grid-column: 11 / span 2; }

/* One numbered row */
.cf-row { border-bottom: 1px solid var(--cf-line); }
.ccl-cf .cf-row-a {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	padding: 32px 0 34px;
	color: var(--cf-ink);
}
.cf-row-n { grid-column: 1 / span 2; font-family: var(--cf-display); font-weight: 800; font-size: 88px; line-height: .78; letter-spacing: -.055em; }
.cf-row-main { grid-column: 3 / span 5; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ccl-cf .cf-tag { font-family: var(--cf-label); font-weight: 700; font-size: 12px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--cf-teal); }
.ccl-cf .cf-row-t { font-weight: 700; font-size: 26px; line-height: 1.16; letter-spacing: -.02em; overflow-wrap: break-word; }
.cf-row-a:hover .cf-row-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cf-row-ship { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--cf-sec); }
.cf-row-sum { grid-column: 8 / span 3; display: flex; flex-direction: column; gap: 16px; padding-top: 26px; min-width: 0; }
.ccl-cf .cf-row-ex { font-size: 15.5px; line-height: 1.55; color: var(--cf-sec); }
.cf-read { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.cf-row-meta { grid-column: 11 / span 2; display: flex; flex-direction: column; min-width: 0; }
.cf-row-where { display: flex; flex-direction: column; gap: 6px; }
.cf-row-reg { font-family: var(--cf-label); font-weight: 700; font-size: 12px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.cf-row-place { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.cf-row-reg + .cf-row-date, .cf-row-where > .cf-row-date:first-child { margin-top: 8px; }
.cf-row-date { font-size: 15px; line-height: 1.4; color: var(--cf-sec); }
.cf-row-filed { margin-top: auto; padding-top: 16px; font-size: 13.5px; line-height: 1.4; color: var(--cf-sec); }

/* Related rows are a little smaller */
.cf-row--rel .cf-row-a { padding: 28px 0 30px; }
.cf-row--rel .cf-row-n { font-size: 64px; }
.ccl-cf .cf-row--rel .cf-row-t { font-size: 24px; }
.ccl-cf .cf-row--rel .cf-row-ex { font-size: 15px; }

/* Pagination */
.cf-pager {
	border-bottom: 1px solid var(--cf-line);
	padding: 24px 0;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: center;
}
.cf-pager .cf-showing { grid-column: 1 / span 2; }
.cf-pages { grid-column: 3 / span 10; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ccl-cf .cf-pg-step { display: flex; align-items: center; gap: 8px; height: 44px; font-size: 16px; font-weight: 600; color: var(--cf-ink); }
.cf-pages > li:first-child .cf-pg-step { padding-right: 16px; }
.cf-pages > li:last-child .cf-pg-step { padding-left: 16px; }
.ccl-cf .cf-pg-step.is-off { color: var(--cf-mut); }
a.cf-pg-step:hover { text-decoration: underline; text-underline-offset: 3px; }
.ccl-cf .cf-pg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 44px;
	height: 44px;
	font-family: var(--cf-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1;
	color: var(--cf-ink);
}
.ccl-cf .cf-pg.is-on { color: var(--cf-teal); font-weight: 800; }
.cf-pg.is-on::after { content: ""; width: 20px; height: 2px; background: var(--cf-teal); }
a.cf-pg:not(.is-on):hover { text-decoration: underline; text-underline-offset: 4px; }
.cf-pg-gap { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 44px; font-family: var(--cf-display); font-weight: 500; font-size: 22px; color: var(--cf-sec); }

.cf-empty { border-top: 1px solid var(--cf-line); border-bottom: 1px solid var(--cf-line); padding: 40px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cf-empty p { font-family: var(--cf-display); font-weight: 500; font-size: 24px; line-height: 1.3; }

/* ---------- Buttons ---------- */
.ccl-cf .cf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 56px;
	min-height: 56px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: var(--cf-label);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.ccl-cf .cf-btn--call { background: var(--cf-blue); border-color: var(--cf-blue); color: #FFFFFF; }
.ccl-cf .cf-btn--call:hover { background: var(--cf-blue-h); border-color: var(--cf-blue-h); }
.ccl-cf .cf-btn--out { background: var(--cf-panel); border-color: var(--cf-out-b); color: var(--cf-ink); padding: 0 26px; }
.ccl-cf .cf-btn--out:hover { border-color: var(--cf-ink); }
html[data-theme="dark"] .ccl-cf .cf-btn--out { background: transparent; }

/* ---------- Help ---------- */
.cf-help { margin-top: 128px; }
.cf-help-in {
	border-top: 1px solid var(--cf-line);
	padding-top: 28px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
}
.cf-help-k { grid-column: 1 / span 2; }
.cf-help-body { grid-column: 3 / span 10; display: flex; flex-direction: column; gap: 28px; }
.ccl-cf .cf-help-h { font-weight: 800; font-size: 72px; line-height: .95; letter-spacing: -.045em; }
.ccl-cf .cf-help-p { max-width: 760px; font-size: 20px; line-height: 1.5; }
.cf-help-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }

/* ---------- About (mobile) ---------- */
.cf-mabout { margin-top: 40px; }
.cf-mabout-in { display: flex; flex-direction: column; gap: 12px; }
.cf-mabout p { font-size: 15px; line-height: 1.6; color: var(--cf-sec); }

/* ---------- Mobile filters (hidden on desktop) ---------- */
.cf-mfilters { margin-top: 36px; }
.cf-mfilters-in { display: flex; flex-direction: column; gap: 16px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.cf-sel { position: relative; display: block; }
.ccl-cf .cf-sel select {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 44px 0 16px;
	border: 1px solid var(--cf-in-b);
	border-radius: 10px;
	background: var(--cf-panel);
	color: var(--cf-ink);
	font-family: var(--cf-display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -.01em;
	text-overflow: ellipsis;
	cursor: pointer;
}
.ccl-cf .cf-sel--cat select { height: 56px; padding-left: 44px; font-size: 15px; }
.cf-sel-n { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-family: var(--cf-display); font-weight: 700; font-size: 14px; line-height: 1; color: var(--cf-teal); pointer-events: none; }
.ccl-cf .cf-sel .cf-ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--cf-teal); pointer-events: none; }
.cf-apply { margin-top: 4px; }

/* ---------- Mobile pager (hidden on desktop) ---------- */
.cf-mpager { border-bottom: 1px solid var(--cf-line); padding: 16px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.cf-mpager > :first-child { justify-self: start; }
.cf-mpager > :last-child { justify-self: end; }
.ccl-cf .cf-mpg {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	border: 1px solid var(--cf-out-b);
	border-radius: 10px;
	background: var(--cf-panel);
	font-family: var(--cf-label);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	color: var(--cf-ink);
}
.cf-mpager > :first-child.cf-mpg { padding: 0 16px 0 10px; }
.cf-mpager > :last-child.cf-mpg { padding: 0 10px 0 16px; }
.ccl-cf .cf-mpg.is-off { border-color: var(--cf-off-b); background: transparent; color: var(--cf-mut); }
html[data-theme="dark"] .ccl-cf .cf-mpg { background: transparent; }
.ccl-cf .cf-mpg-t { justify-self: center; display: flex; align-items: baseline; gap: 6px; font-size: 15px; color: var(--cf-sec); white-space: nowrap; }
.cf-mpg-t strong { font-family: var(--cf-display); font-weight: 800; font-size: 20px; color: var(--cf-ink); }
.cf-mpg-t strong:first-child { color: var(--cf-teal); }

/* =========================================================================
   Incident page
   ========================================================================= */
.cf-ihead { padding-top: 80px; display: flex; flex-direction: column; gap: 32px; }
.ccl-cf--item .cf-kicker { color: var(--cf-ink); }
.ccl-cf .cf-kick-tag { color: var(--cf-teal); }
a.cf-kick-tag { display: inline-block; padding: 14px 0; margin: -14px 0; }
a.cf-kick-tag:hover { text-decoration: underline; text-underline-offset: 3px; }
.ccl-cf .cf-ih1 { font-weight: 800; font-size: min(108px, 7.5vw); line-height: .92; letter-spacing: -.05em; overflow-wrap: break-word; }
.ccl-cf .cf-ih1--m { font-size: min(84px, 5.84vw); line-height: .95; letter-spacing: -.045em; }
.ccl-cf .cf-ih1--l { font-size: min(64px, 4.45vw); line-height: 1; letter-spacing: -.04em; }
.cf-meta {
	margin-top: 8px;
	border-top: 1px solid var(--cf-line);
	border-bottom: 1px solid var(--cf-line);
	padding: 20px 0 22px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 16px;
}
.cf-meta > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ccl-cf .cf-meta dt,
.ccl-cf .cf-kf dt { font-family: var(--cf-label); font-weight: 700; font-size: 11px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--cf-sec); }
.cf-meta dd { font-size: 17px; font-weight: 500; line-height: 1.4; overflow-wrap: break-word; }
.cf-meta-date { grid-column: 1 / span 2; }
.cf-meta-loc { grid-column: 3 / span 4; }
.cf-meta-type { grid-column: 7 / span 2; }
.cf-meta-pub { grid-column: 9 / span 2; }
.cf-meta-upd { grid-column: 11 / span 2; }

.cf-ibody {
	margin-top: 80px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: start;
}
.cf-fig {
	grid-column: 5 / span 8;
	grid-row: 1;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	column-gap: 24px;
	align-items: end;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--cf-line);
}
.ccl-cf .cf-fig-n { grid-column: 1 / span 4; font-family: var(--cf-display); font-weight: 800; font-size: min(300px, 20.8vw); line-height: .74; letter-spacing: -.065em; white-space: nowrap; }
.ccl-cf .cf-fig-n--3 { font-size: min(200px, 13.9vw); line-height: .76; }
.ccl-cf .cf-fig-n--4 { font-size: min(136px, 9.45vw); line-height: .78; letter-spacing: -.055em; }
.cf-fig-c { grid-column: 5 / span 4; display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.cf-fig-rule { display: block; width: 40px; height: 2px; background: var(--cf-teal); }
.cf-fig-t { font-family: var(--cf-display); font-weight: 700; font-size: 34px; line-height: 1.08; letter-spacing: -.025em; }

.cf-facts { grid-column: 1 / span 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cf-kf { border-top: 1px solid var(--cf-line); display: flex; flex-direction: column; }
.cf-kf-row { border-bottom: 1px solid var(--cf-line); padding: 12px 0 14px; display: flex; flex-direction: column; gap: 6px; }
.ccl-cf .cf-kf dt { display: flex; align-items: baseline; gap: 12px; }
.cf-kf-n { flex: none; font-family: var(--cf-display); font-size: 13px; letter-spacing: 0; color: var(--cf-teal); }
.cf-kf dd { margin-left: 29px; font-size: 17px; font-weight: 500; line-height: 1.4; overflow-wrap: break-word; }

.cf-parts { grid-column: 5 / span 8; grid-row: 2; margin-top: 40px; column-count: 2; column-gap: 24px; min-width: 0; }
.cf-ibody--nofig .cf-parts { grid-row: 1; margin-top: 0; }
.cf-ibody--nofacts .cf-parts { grid-column: 1 / -1; }
.cf-ibody--nofacts .cf-fig { grid-column: 1 / -1; }
.cf-parts--long { column-count: 1; max-width: 700px; }
.cf-part { break-inside: avoid; margin-bottom: 48px; }
.cf-part:last-child { margin-bottom: 0; }
.cf-parts--long .cf-part { break-inside: auto; }
.ccl-cf .cf-part-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.cf-part-l { flex: none; font-size: 14px; letter-spacing: 0; color: var(--cf-teal); }
.cf-prose { font-size: 17px; line-height: 1.62; overflow-wrap: break-word; }
.ccl-cf .cf-prose > * + * { margin-top: 14px; }
.ccl-cf .cf-prose h3 { margin-top: 22px; font-family: var(--cf-label); font-weight: 700; font-size: 11px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--cf-sec); }
.ccl-cf .cf-prose h3 + * { margin-top: 8px; }
.ccl-cf .cf-prose > h3:first-child { margin-top: 0; }
.cf-prose ul li { position: relative; padding-left: 20px; line-height: 1.55; }
.cf-prose ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 2px; background: var(--cf-teal); }
.ccl-cf .cf-prose ol { list-style: decimal; padding-left: 22px; }
.cf-prose ol li { padding-left: 4px; line-height: 1.55; }
.cf-prose ol li::marker { color: var(--cf-teal); font-weight: 700; }
.cf-prose li + li { margin-top: 8px; }
.cf-prose strong, .cf-prose b { font-weight: 600; }
.cf-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cf-prose th, .cf-prose td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--cf-off-b); text-align: left; vertical-align: top; }
.ccl-cf .cf-none { font-family: var(--cf-display); font-weight: 500; font-size: 22px; line-height: 1.35; color: var(--cf-sec); }

.cf-onboard { margin-top: 112px; }
.cf-onboard-in {
	border-top: 1px solid var(--cf-line);
	padding-top: 28px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
}
.cf-onboard-in .cf-h2 { grid-column: 1 / span 4; }
.cf-onboard-t { grid-column: 5 / span 7; display: flex; flex-direction: column; gap: 16px; }
.ccl-cf .cf-onboard-p { font-family: var(--cf-display); font-weight: 500; font-size: 28px; line-height: 1.3; letter-spacing: -.015em; }
.ccl-cf .cf-note { font-size: 14px; line-height: 1.4; color: var(--cf-sec); }
.ccl-cf--item .cf-help { margin-top: 112px; }

.cf-related { margin-top: 128px; }
.cf-rel-head {
	border-top: 2px solid var(--cf-line);
	padding: 22px 0 20px;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: end;
}
.cf-rel-head .cf-h2 { grid-column: 1 / span 8; }
.ccl-cf .cf-rel-all { grid-column: 10 / span 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; }
.cf-rel-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.cf-related .cf-rows { border-top: 1px solid var(--cf-line); }
.cf-row--rel .cf-read { display: none; }

/* =========================================================================
   Desktop / mobile switches
   ========================================================================= */
@media (min-width: 900px) {
	.ccl-cf .cf-mob { display: none !important; }
}

/* Tablet and small laptops */
@media (max-width: 1199px) and (min-width: 900px) {
	.ccl-cf .cf-lead { font-size: 24px; }
	.ccl-cf .cf-stat-n { font-size: 80px; }
	.cf-opt-t { font-size: 19px; }
	.ccl-cf .cf-opt { gap: 10px; }
	.cf-opt-n { width: 24px; }
	.cf-row-n { font-size: 72px; }
	.cf-row--rel .cf-row-n { font-size: 56px; }
	.ccl-cf .cf-row-t { font-size: 22px; }
	.ccl-cf .cf-row--rel .cf-row-t { font-size: 21px; }
	.ccl-cf .cf-row-ex { font-size: 15px; }
	.cf-row-place { font-size: 15px; }
	.ccl-cf .cf-help-h { font-size: 56px; }
	.cf-help-k { grid-column: 1 / -1; margin-bottom: 20px; }
	.cf-help-body { grid-column: 1 / -1; }
	.cf-pager .cf-showing { grid-column: 1 / span 3; }
	.cf-pages { grid-column: 4 / span 9; }

	.cf-meta-date { grid-column: 1 / span 3; }
	.cf-meta-loc { grid-column: 4 / span 5; }
	.cf-meta-type { grid-column: 9 / span 4; }
	.cf-meta-pub { grid-column: 1 / span 3; }
	.cf-meta-upd { grid-column: 4 / span 5; }
	.cf-facts { grid-column: 1 / span 4; }
	.cf-fig, .cf-parts { grid-column: 5 / span 8; }
	.cf-parts { column-count: 1; max-width: 700px; }
	.cf-fig-t { font-size: 26px; }
	.cf-kf dd { font-size: 16px; }
	.ccl-cf .cf-onboard-p { font-size: 24px; }
	.cf-onboard-in .cf-h2 { grid-column: 1 / span 5; }
	.cf-onboard-t { grid-column: 6 / span 7; }
}

@media (max-width: 899px) {
	.ccl-cf { --cf-pad: 16px; }
	.ccl-cf .cf-desk { display: none !important; }
	.cf-main { padding-bottom: 72px; }
	.ccl-cf .cf-h2 { font-size: 26px; line-height: 1.05; }
	.ccl-cf .cf-kicker { gap: 6px 12px; }
	.cf-kseg { gap: 12px; }

	/* Hero */
	.cf-hero { padding-top: 18px; gap: 16px; }
	.ccl-cf--cat .cf-hero { padding-top: 12px; }
	.ccl-cf .cf-h1 { font-size: 44px; line-height: .95; letter-spacing: -.045em; }
	.cf-hero-grid { margin-top: 10px; padding-top: 16px; display: flex; flex-direction: column; gap: 24px; }
	.ccl-cf .cf-lead { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
	.cf-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: end; }
	.ccl-cf:not(.ccl-cf--cat) .cf-stat { border-top: 1px solid var(--cf-line); padding-top: 18px; }
	.ccl-cf .cf-stat-n { font-size: 64px; }
	.cf-stat-t { margin-top: 0; }

	/* Filters */
	.cf-mfilters-in { border-top: 1px solid var(--cf-line); padding-top: 18px; }

	/* Rows */
	.cf-latest { margin-top: 44px; }
	.cf-latest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0 14px; border-bottom: 1px solid var(--cf-line); }
	.ccl-cf .cf-row-a {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 14px;
		align-items: baseline;
		padding: 24px 0 22px;
	}
	.cf-row-main, .cf-row-sum, .cf-row-meta { display: contents; }
	.cf-row-n, .cf-row--rel .cf-row-n { grid-column: 1; grid-row: 1; font-size: 40px; line-height: .8; }
	.ccl-cf .cf-tag { grid-column: 2; grid-row: 1; min-width: 0; }
	.ccl-cf .cf-row-t, .ccl-cf .cf-row--rel .cf-row-t { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; font-size: 20px; line-height: 1.2; }
	.cf-row-ship { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
	.ccl-cf .cf-row-ex, .ccl-cf .cf-row--rel .cf-row-ex { grid-column: 1 / -1; grid-row: 4; margin-top: 14px; font-size: 15px; line-height: 1.5; }
	.cf-row-where { grid-column: 1 / -1; grid-row: 5; margin-top: 14px; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; font-size: 14px; line-height: 1.4; }
	.cf-row-where > span + span::before { content: "·"; margin-right: 6px; color: var(--cf-mut); font-weight: 400; }
	.cf-row-reg { font-size: 12px; letter-spacing: .14em; }
	.cf-row-place { margin-top: 0; font-size: 14px; }
	.cf-row-reg + .cf-row-date, .cf-row-where > .cf-row-date:first-child { margin-top: 0; }
	.cf-row-date { font-size: 14px; }
	.cf-read, .cf-row--rel .cf-read { display: inline-flex; grid-column: 1 / -1; grid-row: 6; justify-self: start; margin-top: 14px; font-size: 15px; }
	.cf-row-filed { grid-column: 1 / -1; grid-row: 6; justify-self: end; align-self: center; margin-top: 14px; padding-top: 0; font-size: 14px; }

	/* Help */
	.cf-help, .ccl-cf--item .cf-help { margin-top: 56px; }
	.cf-help-in { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; }
	.cf-help-body { gap: 16px; }
	.ccl-cf .cf-help-h { font-size: 36px; line-height: 1; letter-spacing: -.04em; }
	.ccl-cf .cf-help-p { font-size: 17px; }
	.cf-help-btns { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 8px; }
	.ccl-cf .cf-help-btns .cf-btn { width: 100%; }

	.cf-mabout-in { border-top: 1px solid var(--cf-line); padding-top: 18px; }
	.cf-empty { padding: 28px 0; }
	.cf-empty p { font-size: 20px; }

	/* Incident page */
	.cf-ihead { padding-top: 12px; gap: 16px; }
	.ccl-cf .cf-kicker { letter-spacing: .14em; }
	.ccl-cf .cf-ih1 { font-size: 38px; line-height: .98; letter-spacing: -.04em; }
	.ccl-cf .cf-ih1--m { font-size: 32px; line-height: 1.02; letter-spacing: -.035em; }
	.ccl-cf .cf-ih1--l { font-size: 28px; line-height: 1.05; letter-spacing: -.03em; }
	.cf-meta { margin-top: 8px; padding: 0; border-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; }
	.cf-meta > div { grid-column: auto; border-bottom: 1px solid var(--cf-line); padding: 14px 0; gap: 6px; }
	.cf-meta-date { order: 1; }
	.cf-meta-type { order: 2; }
	.ccl-cf .cf-meta-loc { order: 3; grid-column: 1 / -1; }
	.cf-meta-pub { order: 4; }
	.cf-meta-upd { order: 5; }
	.cf-meta dd { font-size: 16px; }

	.cf-ibody { margin-top: 24px; display: flex; flex-direction: column; align-items: stretch; }
	.cf-fig { order: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; padding-bottom: 20px; }
	.ccl-cf .cf-fig-n { grid-column: 1; font-size: 88px; line-height: .8; }
	.ccl-cf .cf-fig-n--3 { font-size: 68px; }
	.ccl-cf .cf-fig-n--4 { font-size: 52px; }
	.cf-fig-c { grid-column: 2; gap: 10px; padding-bottom: 2px; }
	.cf-fig-t { font-size: 22px; line-height: 1.1; }
	.cf-facts { order: 2; margin-top: 32px; }
	.cf-ibody--nofig .cf-facts { margin-top: 8px; }
	.cf-kf-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 12px 0; }
	.ccl-cf .cf-kf dt { gap: 10px; }
	.cf-kf dd { margin-left: 0; font-size: 16px; }
	.cf-parts, .cf-parts--long { order: 3; margin-top: 40px; column-count: 1; max-width: none; }
	.cf-ibody--nofig .cf-parts { margin-top: 40px; }
	.cf-part { margin-bottom: 36px; }
	.ccl-cf .cf-part-h { font-size: 24px; margin-bottom: 12px; }
	.cf-prose { font-size: 16px; line-height: 1.6; }

	.cf-onboard { margin-top: 48px; }
	.cf-onboard-in { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
	.ccl-cf .cf-onboard-in .cf-h2 { font-size: 30px; }
	.cf-onboard-t { gap: 12px; }
	.ccl-cf .cf-onboard-p { font-size: 22px; line-height: 1.3; }

	.cf-related { margin-top: 56px; display: flex; flex-direction: column; }
	.cf-rel-head { display: contents; }
	.cf-rel-head .cf-h2 { order: 1; border-top: 2px solid var(--cf-line); padding: 16px 0 14px; }
	.cf-related .cf-rows { order: 2; }
	.ccl-cf .cf-rel-all { order: 3; justify-self: auto; align-self: flex-start; margin-top: 12px; font-size: 15px; }
}

@media (max-width: 359px) {
	.ccl-cf .cf-h1 { font-size: 38px; }
	.cf-field-row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
	.cf-kf-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.ccl-cf .cf-btn { transition: none; }
}