/* =====================================================================================
   CRUISES HUB — /cruises/
   Built 2026-08-02 to docs/design/DESIGN_BRIEF_CRUISES.md.
   Standard: page 596 Scandinavia (d91678f) and page 595 Maldives v2 (6c78103), both PO-passed.

   SCOPING LAW: every rule in this file is scoped to `.mk-cruises`. It loads on that slug only and
   cascades AFTER home-v2.css (declared dependency), so it can never reach /home-v2/,
   /destinations/scandinavia/ or /destinations/maldives/.

   THE RATIFIED BAND SYSTEM IS INHERITED, NEVER RE-DERIVED (GLASS-PANEL LAW). `.mkv-band--dark`,
   `.mkv-band--split`, `.mkv-band--feature`, `.mkv-feature-panel`, `.mkv-review`, `.mkv-guide` and
   `.mk-container--wide` all come from home-v2.css. Copying the glass recipe into an `mkc-`
   namespace is the exact failure that law records: a recipe that lives in one template and is
   inherited by none. Only page-specific composition lives here.

   PADDING follows the thresholds in force: photographic and dark bands 0–40px, text bands 88px.
   Not uniform — that was the density defect.

   GOLD #d4a853 on dark solid grounds ONLY. Never over photography (the Scandinavia S3/S4 AA
   failure). On the one light ground this file paints, the darkened #7d5f1f is used — measured at
   5.95:1 on white during the Maldives v2 pass, where #8a6a24 was found to be 4.47:1 despite a
   comment asserting it was safe.
   ===================================================================================== */

/* ------------------------------------------------------------------- §1 HERO ------- */
/* ROTATING, EXACTLY THREE FRAMES (brief §4 S1). The CTA sits outside `.mkc-hero-media`
   entirely, so nothing about it moves or re-renders with the frames.

   ROTATION IS DELIBERATE AND STRUCTURAL, not decoration: no single line owns the hero of a
   ten-line hub, and three frames cover more of the portfolio than one can. Virgin (ocean),
   Celebrity (ocean, at Sydney — the ex-Australia market this page sells to) and Havila (the
   Norwegian coast) are three different arguments, not three views of one.

   BRIGHT-HERO LAW: no full-bleed dim. One LOCAL radial anchored bottom-left that reaches zero
   well inside the frame — a gradient must fade out inside its own box or the box becomes an edge. */
.mk-cruises .mkc-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #0b1418;
}
.mk-cruises .mkc-hero-media { position: absolute; inset: 0; z-index: 0; }
.mk-cruises .mkc-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* PER-FRAME `object-position`, AND THE MOBILE VALUES ARE THE LOAD-BEARING ONES.
   At 390x844 the viewport is aspect 0.46 and every landscape master is cropped on WIDTH, so the
   default `center` takes a vertical strip out of the MIDDLE of the ship. Rendered and measured
   before choosing (scripts/cruise_hero_focus_sweep.py):
     frame 1 Virgin, 2560x1829  — centre lands mid-hull and the ship stops reading as a ship.
                                  80% keeps the bow and the name on the hull.
     frame 2 Celebrity, 2560x1707 — 78% is the only band that keeps the Sydney Harbour Bridge,
                                  which is the entire reason this frame is on the page.
     frame 3 Havila, 2400x2549  — square-ish, so it is cropped on HEIGHT here and barely moves;
                                  22% keeps the near fjord wall, which is what gives the aurora
                                  its scale.
   Desktop crops centred on all three — checked at 16:10 the same way, all three hold. */
.mk-cruises .mkc-hero-frame--1 { object-position: 50% 50%; }
.mk-cruises .mkc-hero-frame--2 { object-position: 50% 52%; }
.mk-cruises .mkc-hero-frame--3 { object-position: 50% 50%; }
@media (max-width: 767px) {
	.mk-cruises .mkc-hero-frame--1 { object-position: 80% 50%; }
	.mk-cruises .mkc-hero-frame--2 { object-position: 78% 50%; }
	.mk-cruises .mkc-hero-frame--3 { object-position: 22% 50%; }
}

/* THE ROTATION. One shared keyframe, three negative delays — not three keyframe sets, which is
   three things to keep in sync. 21s cycle, 7s per frame, 1s crossfade. Frame 1 is opaque at rest
   and is the ONLY frame that renders under reduced motion, so first paint is identical whether the
   animation runs or not: no CLS, no flash of a second photograph, nothing fighting the LCP. */
@keyframes mkcHeroFrame {
	0%      { opacity: 1; }
	28.57%  { opacity: 1; }
	33.33%  { opacity: 0; }
	95.24%  { opacity: 0; }
	100%    { opacity: 1; }
}
.mk-cruises .mkc-hero-frame {
	opacity: 0;
	animation: mkcHeroFrame 21s linear infinite;
	will-change: opacity;
}
.mk-cruises .mkc-hero-frame--1 { opacity: 1; animation-delay:   0s; }
.mk-cruises .mkc-hero-frame--2 { animation-delay: -14s; }
.mk-cruises .mkc-hero-frame--3 { animation-delay:  -7s; }

/* The 01/02/03 marks — DECORATIVE, aria-hidden in the markup. The photographs carry no
   information the copy does not already state, so this is a rhythm cue and not a control. */
.mk-cruises .mkc-hero-marks {
	position: absolute;
	right: var(--mk-pad-x, 24px);
	bottom: 88px;
	z-index: 2;
	display: flex;
	gap: 14px;
	align-items: center;
}
.mk-cruises .mkc-hero-mark {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	color: #ffffff;
	opacity: 0.34;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	animation: mkcHeroMark 21s linear infinite;
}
@keyframes mkcHeroMark {
	0%, 31.5%   { opacity: 0.92; border-bottom-color: rgba(255, 255, 255, 0.92); }
	33.33%, 98% { opacity: 0.34; border-bottom-color: rgba(255, 255, 255, 0.28); }
	100%        { opacity: 0.92; border-bottom-color: rgba(255, 255, 255, 0.92); }
}
.mk-cruises .mkc-hero-mark--1 { animation-delay:   0s; }
.mk-cruises .mkc-hero-mark--2 { animation-delay: -14s; }
.mk-cruises .mkc-hero-mark--3 { animation-delay:  -7s; }

.mk-cruises .mkc-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		78% 108% at 0% 92%,
		rgba(6, 16, 22, 0.76) 0%,
		rgba(6, 16, 22, 0.50) 34%,
		rgba(6, 16, 22, 0.22) 58%,
		rgba(6, 16, 22, 0.06) 78%,
		rgba(6, 16, 22, 0) 92%
	);
	pointer-events: none;
	z-index: 1;
}
@media (max-width: 767px) {
	/* Mobile is a tall frame with the copy at the foot, so the local gradient is anchored to the
	   bottom EDGE rather than a corner — a corner radial on a 0.46 viewport either misses the copy
	   or has to grow until it is a full-bleed dim wearing a gradient's clothes. */
	.mk-cruises .mkc-hero-media::after {
		background: linear-gradient(
			to top,
			rgba(6, 16, 22, 0.90) 0%,
			rgba(6, 16, 22, 0.78) 30%,
			rgba(6, 16, 22, 0.52) 55%,
			rgba(6, 16, 22, 0.20) 78%,
			rgba(6, 16, 22, 0) 96%
		);
	}
}

.mk-cruises .mkc-hero-inner {
	position: relative;
	z-index: 2;
	padding-top: 0;
	padding-bottom: 88px;
	max-width: 1440px;
	width: 100%;
}
@media (max-width: 767px) {
	.mk-cruises .mkc-hero-inner { padding-bottom: 56px; }
	.mk-cruises .mkc-hero-marks { bottom: 20px; }
	/* 17px, not the 19px lead. Inside a 302px panel the lead size sets the subline at ~30
	   characters a line and runs to eight lines; with the title fixed above, that was still enough
	   to push the panel over half the viewport. 17px gives ~33 characters and six lines, and leaves
	   the photograph the larger share of the frame — which is the whole point of a bright hero. */
	.mk-cruises .mkc-hero-sub { font-size: 1.0625rem; margin-bottom: 22px; }
}
/* THE HERO PANEL — the ratified glass recipe, INHERITED from `.mkv-hero-panel` in home-v2.css.
   Nothing about the fill, the blur or the top-edge highlight is restated here: those are the three
   values the GLASS-PANEL LAW fixes, and re-declaring them in this file is how a recipe drifts.
   Only the measure is set, because this panel carries a shorter block than home-v2's (no switching
   line, no pill rail), and 760px against three lines of subline leaves it looking unfilled.

   IF A FRAME EVER NEEDS MORE CONTRAST the levers are, in order: the type halos below, then the
   hero's own local gradient. NEVER a darker fill — re-darkening the panel is a golden-rule-class
   regression, not a nudge. */
.mk-cruises .mkc-hero-panel { max-width: 640px; }
@media (max-width: 767px) {
	/* Full width, and the padding comes IN. At 390 the container already takes 2x24px and the
	   inherited panel padding another 2x24px, leaving 294px of measure — which is what drove the
	   type sizes below. 20px here buys back 8px of line. */
	.mk-cruises .mkc-hero-panel { max-width: none; padding: 20px; }
}

.mk-cruises .mkc-hero-eyebrow {
	margin: 0 0 14px;
	font-size: var(--mk-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
}
/* `.mk-page h1.mkc-hero-title`, not `.mkc-hero-title`. The Elementor Global Kit prints
   `.elementor-kit-6 h1 { color: #1a1a1a }` — one class plus one element — which OUTRANKS a plain
   single-class rule. This has bitten four times in this build (h1 colour, pill font-size, h2
   colour on the feature bands, and again here); it is recorded in style.css and home-v2.css too. */
/* THE TITLE IS SIZED HERE, EXPLICITLY, AND THAT IS A FIX NOT A PREFERENCE.
   The other hubs write `class="mk-hero-title mkm-hero-title"`, so their H1 inherits
   `--mk-fs-display` from the shared sheet. This one carried only its own class, so it was on NO
   type ramp at all and fell through to whatever the Elementor Kit's bare `h1` gives — measured 41.6px
   at 390. Inside a panel that leaves 294px of measure, 41.6px broke the headline to FIVE lines, one
   word per line, and the panel then filled the whole viewport and buried the photograph. Found by
   looking at the mobile frame-2 crop; no instrument reports a bad line-break.

   The clamp is deliberately NOT `--mk-fs-display` (clamp(2.6rem, 5.5vw, 4.5rem)). That ramp is
   tuned for a title spanning the container; this one sits inside a panel that costs ~96px of a 390
   viewport, so its floor has to come down to match. At 1.85rem the headline sets as two lines on
   mobile and two on desktop, which is the reading it was written for. */
.mk-page .mk-cruises h1.mkc-hero-title,
.mk-cruises .mk-page h1.mkc-hero-title,
.mk-cruises h1.mkc-hero-title {
	color: #ffffff;
	font-weight: 700;
	font-size: clamp(1.85rem, 4.2vw, 3.5rem);
	line-height: var(--mk-lh-display);
	letter-spacing: var(--mk-track-display);
	max-width: 19ch;
	margin: 0 0 18px;
	text-wrap: balance;
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 6px rgba(0,0,0,0.86), 0 0 20px rgba(0,0,0,0.70), 0 0 38px rgba(0,0,0,0.46);
}
.mk-cruises .mkc-hero-sub {
	max-width: 52ch;
	margin: 0 0 26px;
	font-size: var(--mk-fs-lead);
	line-height: var(--mk-lh-body);
	color: #ffffff;
	background: none;
	padding: 0;
	border-radius: 0;
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 5px rgba(0,0,0,0.86), 0 0 16px rgba(0,0,0,0.66);
}
.mk-cruises .mkc-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
/* Primary CTA inverted on the dark hero — a solid white fill with ink text. Same ruling as the
   home-v2 hero: the site's ink-fill primary disappears against a photograph. */
.mk-cruises .mkc-hero-ctas .mk-cta {
	background: #ffffff;
	color: var(--mk-ink) !important;
	border-color: #ffffff;
	font-weight: 700;
}
.mk-cruises .mkc-hero-ctas .mk-cta:hover {
	background: var(--mk-alt-surface);
	border-color: var(--mk-alt-surface);
}

/* --------------------------------------------------------- §2 POSITIONING --------- */
/* Prose left at a readable measure, photography BESIDE it bleeding right — the ratified
   `.mkv-split` from home-v2.css, which pages 595 and 596 both use and the PO passed.

   NEVER BELOW, NEVER AN EMPTY RIGHT HALF. Maldives v1 shipped `.mkv-split-inner` /
   `.mkv-split-body`, classes that exist in no stylesheet here, so no split was ever created and
   the photographs stacked under the copy as letterboxed strips. scripts/mkc_classcheck.py is the
   harness for that failure mode and runs before every deploy of this page. */
.mk-cruises .mkc-intro-band { background: var(--mk-white); }
.mk-cruises .mkc-intro-band .mkv-split-media img { min-height: 460px; }
@media (max-width: 899px) {
	/* NOT REORDERED — and the attempt is recorded because the measurement is the interesting part.
	   Flipping the media above the prose with `order: -1` moved mobile screen 2 from 18.5% to 48.1%
	   and screen 3 from 50.7% to 13.7%: the prose block simply moved into the next sample window.
	   The page's actual photography did not change by one pixel, and the MEAN went DOWN, 46.7% to
	   45.2%. That is the ruler moving, not the page — the same artefact DENSITY_ANATOMY.md records
	   for the Maldives mobile figure. With ~800px of prose in a stacked band and only five 844px
	   sample windows, some window is always going to be mostly prose, whichever order it is in.
	   Reverted, because it bought nothing and cost the visual/DOM order agreement.

	   320px, not the inherited 230px. Below 900 the split stacks: copy full width, then the two
	   photographs side by side beneath it. At 230px each is a ~175x230 letterbox out of a 1707x2560
	   PORTRAIT master — the frame's whole subject cropped to a band.
	   It is also the measured cause of this page's one density shortfall. The sampler walks the
	   first five CONSECUTIVE screens (`scrollTo(0, sc*h)`), so on a 10460px mobile page it only ever
	   sees the top 4220px — and screen 2 lands squarely on this band, which measured 18.5%. At 320px
	   the crop is 175x320 (0.55 against a 0.67 source, a mild trim) and the band stops reading as
	   text-with-a-strip. */
	.mk-cruises .mkc-intro-band .mkv-split-media img { min-height: 320px; }
}
.mk-cruises .mkc-lines {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	gap: 16px;
}
.mk-cruises .mkc-lines li {
	position: relative;
	padding-left: 20px;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-grey);
}
.mk-cruises .mkc-lines li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 9px;
	height: 2px;
	background: #7d5f1f;   /* gold, darkened for AA on white — 5.95:1 measured */
}
.mk-cruises .mkc-lines li strong { color: var(--mk-ink); }
.mk-cruises .mkc-lines-note {
	margin: 0;
	font-size: var(--mk-fs-small);
	line-height: 1.6;
	color: var(--mk-grey);
	max-width: 52ch;
}

/* ------------------------------------------------- §3 THE TEN LINES — SIGNATURE --- */
/* "This band is what the page is judged on" (brief §4 S3). Small photo-led tiles on the ink
   band: TILES, NOT A CATALOGUE — ten lines is a modest portfolio and the page has to read as
   credible specialist, not as inventory.

   COLUMN COUNTS ARE CHOSEN SO TEN NEVER LEAVES AN ORPHAN. Ten divides by 1, 2 and 5 only, and a
   four-column grid with a two-tile last row is a defect this build has already shipped once (the
   Maldives v2 tours grid). So:
     <620px    1 column, and the tile turns HORIZONTAL (photo left, copy right) — ten stacked
               4:3 cards is 3000px of scrolling for a band that is meant to read as a set.
     620px+    2 columns  (5 rows, clean)
     1080px+   4 columns, and tiles 9 and 10 each span 2 so the last row FILLS rather than
               trailing two tiles against dead space
     1340px+   5 columns  (2 rows, clean — the intended reading)
   Below 1340 the 5-column tile would be ~200px wide, which is under the width its copy line needs;
   that is why the 4-column step exists at all rather than pushing 5 columns down. */
.mk-cruises .mkc-lines-band { padding-block: clamp(56px, 6vw, 88px); }
.mk-cruises .mkc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
@media (min-width: 620px)  { .mk-cruises .mkc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1080px) {
	.mk-cruises .mkc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mk-cruises .mkc-tile:nth-child(9),
	.mk-cruises .mkc-tile:nth-child(10) { grid-column: span 2; }
}
@media (min-width: 1340px) {
	.mk-cruises .mkc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.mk-cruises .mkc-tile:nth-child(9),
	.mk-cruises .mkc-tile:nth-child(10) { grid-column: span 1; }
}

.mk-cruises .mkc-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--mk-r-card);
	transition: transform var(--mk-dur) var(--mk-ease),
	            border-color var(--mk-dur) var(--mk-ease),
	            background var(--mk-dur) var(--mk-ease);
}
.mk-cruises .mkc-tile:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.40);
	background: rgba(255, 255, 255, 0.10);
}
.mk-cruises .mkc-tile:focus-visible { outline: 2px solid var(--mk-gold); outline-offset: 3px; }

/* Below 620 the tile is a horizontal row. `align-items: stretch` on the grid makes the media
   column full height, so the photograph fills its cell rather than floating in it. */
@media (max-width: 619px) {
	.mk-cruises .mkc-tile {
		display: grid;
		grid-template-columns: 44% minmax(0, 1fr);
		align-items: stretch;
	}
}
/* 44%, not 38%. At 38% the photograph is a strip roughly 133px wide on a 390 viewport — narrow
   enough that Havila's fjord and MSC's harbour both lose the thing that makes them worth showing.
   44% costs the copy about 3 characters a line (measured: ~29ch to ~26ch, and no tile gains a
   line), and it is also the honest lever on the one density threshold this page misses: S3 is 27%
   of the mobile page, so the width of that strip is most of the mobile photography number. */

.mk-cruises .mkc-tile-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #10171b;
	aspect-ratio: 4 / 3;
}
@media (max-width: 619px) {
	.mk-cruises .mkc-tile-media { aspect-ratio: auto; height: 100%; min-height: 116px; }
}
.mk-cruises .mkc-tile-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 620ms var(--mk-ease-out);
}
.mk-cruises .mkc-tile:hover .mkc-tile-img { transform: scale(1.04); }

/* THE TYPOGRAPHIC TILE — Cunard and Hurtigruten. Both hold ZERO photography in the source set,
   and a named line is never backfilled from another line's fleet (GR6).

   THIS IS THE MEDIA SOCKET, NOT A PLACEHOLDER STATE. The markup is identical for all ten tiles;
   `.mkc-tile-media` simply has no <img> inside it. Give the line an attachment id in
   mykish_cruise_lines() and the photograph slots in behind the same body copy with no markup
   change, no CSS change and no layout shift — the same one-integer swap the Santa Claus Holiday
   Village socket took on page 596.

   IT MUST NOT READ AS A FAILED IMAGE LOAD. So the empty socket is composed rather than blank: a
   calm ink field with a single soft light source, a gold hairline, and the line's own name set
   small, wide and quiet. That is a deliberate editorial treatment. The name is `aria-hidden` in
   the markup because the tile's real <h3> already carries it — this is a watermark, not a label. */
.mk-cruises .mkc-tile--type .mkc-tile-media {
	display: grid;
	place-items: center;
	padding: 18px;
	background-color: #0d1519;
	background-image:
		radial-gradient(120% 92% at 76% 6%, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(152deg, #17202400 0%, #0c1215 52%, #090e11 100%);
}
/* rgba(255,255,255,0.56), NOT 0.34. The first build used 0.34 because it looked appropriately
   quiet, and the scorer measured it at 3.10:1 on #0d1519 — below the 4.5 floor, because at 0.68rem
   / 700 this is SMALL text and does not qualify for the 3.0 large-text floor.
   `aria-hidden` does not exempt it: a word a sighted reader can read is not incidental just because
   the accessibility tree skips it.
   0.56 measures ~5.9:1 here. 0.45 would have cleared at ~4.55 and was rejected deliberately — the
   Maldives v2 pass found #8a6a24 shipped at 4.47 under a comment asserting it was safe, and sitting
   on the boundary is how that happens. Quiet is bought with SIZE, TRACKING and WEIGHT, which this
   mark already has; it is not bought with contrast. */
.mk-cruises .mkc-tile-mark {
	display: block;
	text-align: center;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.56);
}
.mk-cruises .mkc-tile-mark::before {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	margin: 0 auto 12px;
	background: var(--mk-gold);
	opacity: 0.72;
}

.mk-cruises .mkc-tile-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 16px 18px;
}
@media (min-width: 1340px) { .mk-cruises .mkc-tile-body { padding: 15px 15px 17px; } }
.mk-cruises .mkc-tile-group {
	display: block;
	margin-bottom: 7px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: var(--mk-gold);
}
.mk-cruises h3.mkc-tile-name,
.mk-page .mk-cruises h3.mkc-tile-name {
	margin: 0 0 7px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: var(--mk-track-tight);
	color: #ffffff;
}
.mk-cruises .mkc-tile-line {
	margin: 0 0 14px;
	font-size: 0.83rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.80);
}
.mk-cruises .mkc-tile-link {
	display: block;
	margin-top: auto;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var(--mk-track-cta);
	text-transform: uppercase;
	color: var(--mk-gold);
}
.mk-cruises .mkc-tile:hover .mkc-tile-link { text-decoration: underline; }

.mk-cruises .mkc-lines-intro {
	margin: 0 0 var(--mk-space-lg);
	max-width: 62ch;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: rgba(255, 255, 255, 0.80);
}

/* ------------------------------ §3.5 EVERYTHING AROUND THE CRUISE ------------------ */
/* PO addition, 2026-08-02. Text-led with ONE photograph, and composed as the MIRROR of S2:
   photograph bleeding LEFT, prose right at a readable measure.

   Why mirrored rather than reusing `.mkv-split`: S2 is prose-left / two portraits bleeding right,
   and Meet Rahul is prose-left / portrait right. A third prose-left, image-right band would be the
   same move three times on one page. The glass panels already alternate (S4 right, S9 left); this
   puts that alternation into the white bands too.

   DOM ORDER IS MEDIA FIRST, so no `order` trick is needed: on desktop it takes the left column, and
   when it stacks below 900 the photograph sits above the prose — which is the right way round on a
   phone anyway, and keeps visual and reading order in agreement.

   Padding 0 on the band itself; the copy column carries it. The photograph is the band's mass,
   which is what the density thresholds ask of a photographic band. */
.mk-cruises .mkc-around { overflow: hidden; background: var(--mk-white); padding: 0; }
.mk-cruises .mkc-around-inner { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
	/* Slightly narrower media column than S2's, because this band carries ONE frame rather than
	   two — a single photograph at 1fr would outweigh the prose it is supporting. */
	.mk-cruises .mkc-around-inner {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
		align-items: stretch;
	}
}
.mk-cruises .mkc-around-media { align-self: stretch; }
.mk-cruises .mkc-around-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The quay and the fishing boats are in the lower half of the frame and the bow rises on the
	   right; holding the crop slightly below centre keeps both rather than filling the column with
	   mountain. */
	object-position: 50% 58%;
	min-height: 460px;
}
@media (max-width: 899px) {
	.mk-cruises .mkc-around-img { min-height: 300px; }
}
.mk-cruises .mkc-around-copy {
	max-width: calc(var(--mk-container) * 0.52);
	margin-right: auto;
	padding: clamp(56px, 6vw, 88px) var(--mk-pad-x) clamp(56px, 6vw, 88px) clamp(36px, 4vw, 64px);
	box-sizing: content-box;
	align-self: center;
}
@media (max-width: 899px) {
	.mk-cruises .mkc-around-copy {
		max-width: none;
		margin: 0;
		padding: clamp(48px, 8vw, 72px) var(--mk-pad-x);
	}
}
.mk-cruises .mkc-around-p {
	margin: 0 0 16px;
	max-width: 56ch;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-grey);
}
.mk-cruises .mkc-around-p:last-child { margin-bottom: 0; }
/* The closing line is the one that answers "why not just book it myself", so it carries the ink
   weight rather than sitting at the same value as the two paragraphs setting it up. */
.mk-cruises .mkc-around-p:last-child { color: var(--mk-ink); }

/* ------------------------------------------------------- §4 / §9 FEATURE BANDS ---- */
/* Both use the ratified `.mkv-band--feature` + `.mkv-feature-panel` glass recipe from
   home-v2.css, inherited rather than re-declared. §4 puts the panel RIGHT (`.mkv-band--right`)
   and §9 puts it LEFT, over frames of different tone (daylight fjord vs dusk ocean), so two
   feature bands on one page read as variation rather than repetition. */
/* `margin-top` here, not a bigger `margin-bottom` on `.mkc-cta-title` — that heading class is
   shared with S9, where it is followed by a paragraph and 14px is right. A list needs more air
   under a 40px heading than a paragraph does, and after S4 lost its fourth bullet the panel has
   the room to give. */
.mk-cruises .mkc-why-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.mk-cruises .mkc-why-list li {
	position: relative;
	padding-left: 20px;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 5px rgba(0,0,0,0.88), 0 0 14px rgba(0,0,0,0.74);
}
.mk-cruises .mkc-why-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 9px;
	height: 2px;
	background: rgba(255, 255, 255, 0.85);   /* NOT gold — this sits over photography */
}
.mk-cruises .mkc-why-list li strong { font-weight: 700; }

.mk-page .mk-cruises h2.mkc-cta-title,
.mk-cruises h2.mkc-cta-title {
	margin: 0 0 14px;
	font-size: var(--mk-fs-h2);
	font-weight: 700;
	letter-spacing: var(--mk-track-tight);
	line-height: var(--mk-lh-heading);
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 6px rgba(0,0,0,0.88), 0 0 18px rgba(0,0,0,0.72);
}
.mk-cruises .mkc-cta-line {
	margin: 0 0 22px;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 5px rgba(0,0,0,0.88), 0 0 14px rgba(0,0,0,0.74);
}
.mk-cruises .mkc-cta-note {
	margin: 14px 0 0;
	font-size: var(--mk-fs-small);
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.8);
}
.mk-cruises .mkv-feature-panel .mk-cta {
	background: #ffffff;
	color: var(--mk-ink) !important;
	border-color: #ffffff;
	font-weight: 700;
}
.mk-cruises .mkv-feature-panel .mk-cta:hover {
	background: var(--mk-alt-surface);
	border-color: var(--mk-alt-surface);
}
/* The panel's eyebrow sits on glass over photography, so it is WHITE, not gold. */
.mk-cruises .mkv-feature-panel .mk-section-eyebrow {
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.82);
}

/* ------------------------------------------------- §8 WHY AN AGENT (text band) ---- */
.mk-cruises .mkc-agent-lead {
	margin: 0 0 24px;
	max-width: var(--mk-measure);
	font-size: var(--mk-fs-lead);
	line-height: var(--mk-lh-body);
	color: var(--mk-ink);
}
.mk-cruises .mkc-agent-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 18px;
	max-width: var(--mk-measure);
}
.mk-cruises .mkc-agent-list li {
	position: relative;
	padding-left: 22px;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-grey);
}
.mk-cruises .mkc-agent-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 10px;
	height: 2px;
	background: #7d5f1f;
}
.mk-cruises .mkc-agent-list li strong { color: var(--mk-ink); }
.mk-cruises .mkc-agent-close {
	margin: 0;
	max-width: var(--mk-measure);
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-grey);
}