/* =============================================================================================
   CRUISE LINE PAGE — /cruises/<slug>/  (CRUISE_ARCHITECTURE Layer 1)
   Built 2026-08-09. Every rule scoped to the `.mk-cruise-line` body class, so this sheet cannot
   reach the cruises hub or any other page. Loads AFTER home-v2.css and inherits its container,
   type scale and band rhythm — ONE copy of the ratified recipe, never re-derived (GLASS-PANEL LAW).

   ┌──────────────────────────────────────────────────────────────────────────────────────────┐
   │  THE EMPTY STATES ARE THE PRIMARY PATH. They are styled FIRST and styled BEST.            │
   │  PO ruling 2026-08-09: eleven lines against one or two deals a week means most line pages │
   │  carry an empty deals band most of the time, and the FIRST page built (Carnival) has zero │
   │  ships and zero deals. A stylesheet that treats the empty state as a fallback would be    │
   │  wrong for nine lines out of eleven, on the majority of their bands.                      │
   └──────────────────────────────────────────────────────────────────────────────────────────┘
   ============================================================================================= */

/* --- BANDS -------------------------------------------------------------------------------- */
.mk-cruise-line .mkl-band { padding: var(--mk-sec-md, clamp(64px, 8vw, 96px)) 0; background: var(--mk-white); }
.mk-cruise-line .mkl-band--tint { background: var(--mk-alt-surface, #f2f5f6); }
/* READING MEASURE IS APPLIED TO THE CONTENT, NEVER TO THE CONTAINER — and this took two passes to
   get right, which is why the reasoning is here rather than the value alone.
     · Narrowing `.mk-container` itself re-centres the column, so §2/§5 sat indented from §3/§4.
     · Cancelling its auto margins instead pushed them out to the viewport padding, misaligning them
       the other way — the container is centred with a max-width, so "flush left" is NOT the same
       vertical line as the rest of the page.
   Leaving the container exactly as it is and capping the CHILD keeps every band on one left edge
   and still holds the text to a readable measure. */
.mk-cruise-line .mkl-narrow .mk-prose,
.mk-cruise-line .mkl-narrow .mkl-empty,
.mk-cruise-line .mkl-narrow .mkl-h2,
.mk-cruise-line .mkl-narrow .mkl-note { max-width: 46rem; }
.mk-cruise-line .mkl-h2 {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.35rem);
	font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
	color: var(--mk-ink); margin: 6px 0 0;
}

/* Adjacent same-ground bands collapse their facing padding — the identical rule the ship template
   carries, and for the identical reason. On a line page with no identity band and no deals the
   fleet band sits directly against §2, and two paddings meeting read as a hole. The adjacency only
   occurs when a band degraded away, so this fires exactly when it should. */
.mk-cruise-line .mkl-band:not(.mkl-band--tint) + .mkl-band:not(.mkl-band--tint) { padding-top: 0; }

/* --- §1 HERO ------------------------------------------------------------------------------ */
.mk-cruise-line .mkl-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(320px, 42vh, 520px); display: flex; align-items: flex-end; }
.mk-cruise-line .mkl-hero-media { position: absolute; inset: 0; z-index: 0; }
.mk-cruise-line .mkl-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bright-hero law: a LOCAL gradient at the foot only, never a full-bleed dim over the photograph. */
/* BRIGHT-HERO LAW: local gradients only, never a full-bleed dim. Two of them, because one was not
   enough on this photograph — the Carnival frame is bright water and bright sky across the whole
   width, and the title sat over the brightest part of it. The foot gradient anchors the text block;
   the second is a soft left-weighted wash under the type column only, leaving the right two-thirds
   of the photograph — where the subject actually is — untouched. Legibility is carried here and by
   the type's own halo below, never by darkening the picture. */
.mk-cruise-line .mkl-hero-scrim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(14,18,20,0) 38%, rgba(14,18,20,0.78) 100%),
		linear-gradient(100deg, rgba(14,18,20,0.55) 0%, rgba(14,18,20,0.18) 46%, rgba(14,18,20,0) 68%);
}
/* `width: 100%` is load-bearing: `.mkl-hero` is a flex row, so without it the container shrinks to
   its content and its own `margin: 0 auto` CENTRES it — the hero title then sat ~350px right of
   every other band's left edge. Full width restores normal container behaviour, so the hero shares
   the page's one left edge. */
.mk-cruise-line .mkl-hero-inner { position: relative; z-index: 2; width: 100%; padding-top: clamp(48px, 10vh, 120px); padding-bottom: clamp(28px, 5vh, 56px); color: var(--mk-white); }
.mk-cruise-line .mkl-hero-group {
	font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--mk-gold, #d4a853); margin: 0 0 10px;
}
.mk-cruise-line .mkl-hero-title {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 700; line-height: 1.05;
	letter-spacing: -0.015em; margin: 0; color: var(--mk-white);
	text-shadow: 0 2px 18px rgba(0,0,0,0.42);
}
.mk-cruise-line .mkl-hero-line { margin: 14px 0 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.55; color: rgba(255,255,255,0.92); text-shadow: 0 1px 12px rgba(0,0,0,0.5); }

/* THE TYPOGRAPHIC HERO — Cunard and Hurtigruten hold no registry photograph (`img => 0`). Not a
   blank frame and not a placeholder: the same composed ink field the 13 ship heroes use, so a
   photograph-less line reads as a deliberate treatment rather than a failed image load. */
.mk-cruise-line .mkl-hero--socket {
	background-color: var(--mk-ink-canvas, #0e1214);
	background-image:
		radial-gradient(120% 90% at 50% -10%, rgba(212,168,83,0.10) 0%, rgba(212,168,83,0) 42%),
		linear-gradient(180deg, #16202a 0%, #0e1214 78%);
}
.mk-cruise-line .mkl-hero--socket .mkl-hero-title,
.mk-cruise-line .mkl-hero--socket .mkl-hero-line { text-shadow: none; }

/* --- §2 BRAND ARGUMENT -------------------------------------------------------------------- */
/* The argument is the one band that is always prose and never a grid, so it gets reading measure
   and a slightly larger body size than the rest of the page. On a `product`-basis line this band
   plus the fleet's empty state IS the page — it has to hold on its own. */
.mk-cruise-line .mkl-argument .mk-prose { font-size: 1.0625rem; line-height: 1.65; }
.mk-cruise-line .mkl-argument .mk-prose p { margin: 0 0 1.15em; }
.mk-cruise-line .mkl-argument .mk-prose p:last-child { margin-bottom: 0; }
/* The attributed first-hand line — renders ONLY for `sailed` / `inspected`. There is no `product`
   markup branch at all, so this class simply never appears on seven of the eleven lines. */
.mk-cruise-line .mkl-basis {
	margin: 26px 0 0; padding-left: 16px;
	border-left: 3px solid var(--mk-gold, #d4a853);
	font-size: 0.9375rem; font-weight: 600; color: var(--mk-ink-muted, #4a5560);
}

/* --- §3 COMMERCIAL IDENTITY --------------------------------------------------------------- */
.mk-cruise-line .mkl-identity-list { display: grid; gap: 20px 40px; margin: 28px 0 0; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .mk-cruise-line .mkl-identity-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .mk-cruise-line .mkl-identity-list { grid-template-columns: repeat(3, 1fr); } }
.mk-cruise-line .mkl-identity-item dt {
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--mk-teal-text, #0d7f85); margin: 0 0 6px;
}
.mk-cruise-line .mkl-identity-item dd { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--mk-ink); }

/* --- §4 FLEET ----------------------------------------------------------------------------- */
/* The heading carries a template rule, not a content choice: "the ships we sell in Australia",
   never "our fleet". Carnival is 4 AU-deployable against a 30-ship global fleet, so the possessive
   framing would read as 26 missing pages. Given room to breathe because on a zero-ship line it is
   the band's only line of type above the empty state. */
.mk-cruise-line .mkl-fleet .mkl-h2 { max-width: 24ch; }
/* AUTO-FIT, NOT A FIXED COLUMN COUNT. A hard `repeat(3, 1fr)` put Carnival's FOUR ships on a 3+1
   row, and a lone card on its own line reads as a card that failed to load — the same misread the
   ship template's empty grid slots produced. Auto-fit lets 4 sit as 4 on a wide screen and 2×2 on a
   medium one, and it keeps working for the lines with 9 (Hurtigruten) and 1.

   THE 210px MINIMUM IS MEASURED, NOT CHOSEN. At 260px only three tracks fit the container's ~1040px
   inner width (4×260 + 3×14 gap = 1082) so auto-fit silently fell back to 3 and the 3+1 wrap
   survived the fix. 4×210 + 42 = 882 and fits with room. The cards carry two short lines of text, so
   210px is comfortable rather than cramped. */
.mk-cruise-line .mkl-shipgrid {
	display: grid; gap: 14px; margin-top: 30px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.mk-cruise-line .mkl-shipcard {
	display: block; padding: 20px 24px; text-decoration: none;
	background: var(--mk-white);
	border: 1px solid var(--mk-border); border-left: 3px solid var(--mk-gold, #d4a853);
	border-radius: var(--mk-r-card, 10px);
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.mk-cruise-line .mkl-shipcard:hover,
.mk-cruise-line .mkl-shipcard:focus-visible { border-color: var(--mk-teal, #00c2cb); border-left-color: var(--mk-gold, #d4a853); transform: translateY(-1px); }
.mk-cruise-line .mkl-shipcard-name { display: block; font-family: 'Montserrat', system-ui, sans-serif; font-size: 1.0625rem; font-weight: 700; color: var(--mk-ink); }
.mk-cruise-line .mkl-shipcard-meta { display: block; margin-top: 5px; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--mk-ink-muted, #4a5560); }

/* --- §4 THE COMPACT FLEET LIST — PO ruling 2026-08-11 --------------------------------------
   Ships as ROWS ON THIS PAGE rather than as pages of their own. Cunard is the first line to use it.

   ⛔ THERE IS NO IMAGE SLOT IN THIS BLOCK, AND THERE MUST NOT BE ONE.
   Cunard has four ships and ZERO per-ship photography — brand marks and lifestyle frames, nothing
   attributable to a NAMED Queen — and a generic Cunard frame captioned "Queen Anne" is a real
   photograph telling a false story (GR6). Cards with empty image slots is a large part of what made
   the four standalone ship pages feel poor, so the empty frame is not styled small here, it is
   ABSENT. A future photo pack promotes the line to `.mkl-shipgrid` cards; it does not fill a hole
   left open in this ruleset.

   ⛔ AND IT IS DELIBERATELY NOT CARD GRAMMAR. No white fill, no radius, no gold left-rule, no hover
   lift — those are `.mkl-shipcard`'s, and they all say "this is a link to somewhere else". These
   rows go nowhere: the ship IS this block. Borrowing the affordance would promise a page that no
   longer exists. Hairline rules on a tinted ground instead: a list that reads as a list. */
.mk-cruise-line .mkl-fleet-tiers { margin: 26px 0 0; max-width: 46rem; }
/* THE LADDER IS ONE LINE OF TEXT AND NEVER A TABLE (PO ruling). 28 rows with identical Grade and
   Code columns is what failed G-2 on the standalone pages. Set as a rule of its own — larger than
   body, letterspaced, in the gold — because it is the single strongest differentiator Cunard has
   and it has to carry that weight without becoming a grid again. */
.mk-cruise-line .mkl-fleet-ladder {
	margin: 14px 0 0; max-width: 46rem;
	font-family: 'Montserrat', system-ui, sans-serif; font-size: 0.9375rem; font-weight: 600;
	letter-spacing: 0.06em; line-height: 1.7; color: var(--mk-ink);
	padding: 14px 0 0; border-top: 2px solid var(--mk-gold, #d4a853);
}
.mk-cruise-line .mkl-fleetlist { list-style: none; margin: 34px 0 0; padding: 0; }
.mk-cruise-line .mkl-fleetrow {
	padding: 24px 0; border-top: 1px solid var(--mk-border);
}
.mk-cruise-line .mkl-fleetrow:last-child { border-bottom: 1px solid var(--mk-border); }
/* TWO COLUMNS FROM 720px: the name and its numbers anchor left, the character line reads right.
   Below that everything stacks, which keeps the reading order identical to the source. The 15rem
   left track holds "Entered service 2024" on one line without wrapping the label off its value. */
@media (min-width: 720px) {
	.mk-cruise-line .mkl-fleetrow {
		display: grid; gap: 8px 40px; align-items: start;
		grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
	}
	.mk-cruise-line .mkl-fleetrow-name { grid-column: 1; }
	.mk-cruise-line .mkl-fleetrow-spec { grid-column: 1; }
	.mk-cruise-line .mkl-fleetrow-char { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.mk-cruise-line .mkl-fleetrow-name {
	margin: 0; font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--mk-ink);
}
.mk-cruise-line .mkl-fleetrow-spec { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.mk-cruise-line .mkl-fleetrow-spec > div { display: flex; flex-direction: column; }
.mk-cruise-line .mkl-fleetrow-spec dt {
	font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--mk-teal-text, #0d7f85);
}
.mk-cruise-line .mkl-fleetrow-spec dd {
	margin: 2px 0 0; font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 0.9375rem; font-weight: 600; color: var(--mk-ink);
}
.mk-cruise-line .mkl-fleetrow-char {
	margin: 12px 0 0; max-width: 42rem;
	font-size: 1rem; line-height: 1.65; color: var(--mk-ink);
}
/* THE ONE FARE LINE. Set at reading size in the body colour, NOT as a muted footnote — the same
   reasoning as the empty state directly below: muted-italic-grey is the visual grammar of an
   apology, and this sentence is an invitation. It does not explain, apologise or hedge, and the
   CTA sits directly under it. */
.mk-cruise-line .mkl-fleet-fare {
	margin: 30px 0 0; max-width: 42rem;
	font-size: 1.0625rem; line-height: 1.6; color: var(--mk-ink);
}
.mk-cruise-line .mkl-fleet-fare + .mk-cta { margin-top: 22px; }

/* --- THE EMPTY STATE — styled FIRST and styled BEST, because it is the normal state ---------
   Deliberately NOT muted, NOT italic, NOT a smaller grey note. Those are the visual grammar of an
   apology, and the PO ruled the empty state is the ENQUIRE, never an apology. It is set at reading
   size, in the body colour, with the CTA directly beneath it — i.e. it looks like an offer, because
   it is one. On most line pages, most of the time, THIS is what the band is. */
.mk-cruise-line .mkl-empty {
	margin: 22px 0 0; max-width: 42rem;
	font-size: 1.0625rem; line-height: 1.6; color: var(--mk-ink);
}
.mk-cruise-line .mkl-empty + .mk-cta { margin-top: 26px; }
.mk-cruise-line .mkl-note { margin: 16px 0 0; font-size: 0.8125rem; color: var(--mk-ink-muted, #4a5560); }

/* --- §5 DEALS ----------------------------------------------------------------------------- */
/* Tinted ground so the band reads as a distinct offer even when it holds no offers — which, at one
   or two deals a week across eleven lines, is its normal condition. A band that only looked like a
   band when populated would leave most line pages ending on an unmarked paragraph. */
.mk-cruise-line .mkl-deals { border-top: 1px solid var(--mk-border); }
.mk-cruise-line .mkl-dealgrid { display: grid; gap: 14px; margin-top: 28px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .mk-cruise-line .mkl-dealgrid { grid-template-columns: 1fr 1fr; } }
.mk-cruise-line .mkl-dealcard {
	display: block; padding: 22px 26px; text-decoration: none; background: var(--mk-white);
	border: 1px solid var(--mk-border); border-radius: var(--mk-r-card, 10px);
}
.mk-cruise-line .mkl-dealcard-name { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; color: var(--mk-ink); }

/* --- THE FARE NOTE — the qualifier that travels WITH the figure (2026-08-12) ----------------
   ⛔ NOT SMALL PRINT, AND THAT IS THE WHOLE POINT. The PO's condition on publishing an indicative
   fare is "on the price, not in small print", so this is set at reading size in the body colour,
   directly under the fare rows — not muted, not 12px, not tucked beneath the terms list. On
   Princess it carries the fact that the fare is a BUNDLED Princess Plus fare, which is the one
   thing that stops a reader comparing it with another line's cruise-only number. */
.mk-cruise-line .mkl-offer-farenote {
	margin: 20px 0 0; max-width: 44rem;
	font-size: 0.9375rem; line-height: 1.65; color: var(--mk-ink);
	padding: 14px 0 0; border-top: 1px solid var(--mk-border);
}

/* --- CRUISE IN FOCUS — the deals band's fourth state (PO 2026-08-13) -----------------------
   Deliberately NOT card grammar and NOT offer grammar. An offer card carries a price and a
   validity; this carries a judgement, and if the two looked alike a reader would go hunting for a
   number that is not there — the exact confusion the no-fare ruling exists to prevent. So: a gold
   rule, the ship set as the headline, and the PO's sentence at reading size. */
.mk-cruise-line .mkl-focus {
	margin: 26px 0 0; max-width: 46rem;
	padding: 22px 0 0; border-top: 2px solid var(--mk-gold, #d4a853);
}
.mk-cruise-line .mkl-focus-ship {
	margin: 0; font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--mk-ink);
}
.mk-cruise-line .mkl-focus-route {
	margin: 6px 0 0; font-size: 0.875rem; font-weight: 600;
	letter-spacing: 0.04em; color: var(--mk-teal-text, #0d7f85);
}
.mk-cruise-line .mkl-focus-note { margin: 14px 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--mk-ink); }
.mk-cruise-line .mkl-focus-note + .mk-cta { margin-top: 22px; }
/* MULTIPLE FOCUSES stack as separate rules rather than cards — a card grid would read as an offer
   grid, which is the one thing this band must not look like. Viking carries three (river, ocean,
   expedition) and the kicker names the product line. */
.mk-cruise-line .mkl-focuslist { margin: 0; }

/* ⛔ THE FOCUS STATE SITS AS ITS OWN BAND (PO ruling 2026-08-13). Measured on the live page, this
   band rendered `padding-top: 0` against 80-96px everywhere else — the adjacent-untinted-band
   collapse above, firing on a state it was not written for. `--mk-sec-sm` rather than `--mk-sec-md`
   deliberately: the band already carries a 1px border-top as its separator, so it needs enough air
   to detach, not a full editorial gap on top of the previous band's 96px bottom.
   SCOPED TO `--focus` ON PURPOSE — widening it to `.mkl-deals` would move the deals band on nine
   line pages that have already passed G-2. */
/* ⚠ THE `:not(.mkl-band--tint)` ON THE RIGHT-HAND SIDE IS LOAD-BEARING, NOT COPY-PASTE.
   The collapse rule carries FIVE class weights; the first version of this override carried
   four and lost silently — the class was on the element, the rule was later in the file, and
   the padding stayed 0. Measured on the rendered page, not assumed from the deploy. */
.mk-cruise-line .mkl-band:not(.mkl-band--tint) + .mkl-band.mkl-deals--focus:not(.mkl-band--tint) {
	padding-top: var(--mk-sec-sm, clamp(56px, 7vw, 80px));
}

/* ⛔ THE SINGLE LABEL IS AN `h2` FOR THE DOCUMENT OUTLINE AND AN EYEBROW TO THE EYE — and the
   font-size here is the load-bearing line, not tidiness. `.mk-section-eyebrow` sets no size that
   beats a heading's own, so the first build rendered "WORTH A LOOK" at 34px INK — heading scale,
   uppercased and letter-spaced. That hybrid reads as an accident rather than a decision. These
   declarations restate the eyebrow contract explicitly so the tag cannot override it. */
.mk-cruise-line .mkl-focus-eyebrow {
	font-size: var(--mk-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--mk-track-wide);
	text-transform: uppercase;
	color: var(--mk-teal-text);
	margin: 0 0 22px;
}


.mk-cruise-line .mkl-focuslist .mkl-focus + .mkl-focus { margin-top: 30px; }
.mk-cruise-line .mkl-focus-kicker {
	margin: 0 0 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--mk-ink-muted, #4a5560);
}
.mk-cruise-line .mkl-focuslist + .mk-cta { margin-top: 26px; }

/* --- §6 BACK ------------------------------------------------------------------------------ */
/* Enough air to read as its own step rather than as an offcut of the band above it. */
.mk-cruise-line .mkl-back { padding-top: var(--mk-sec-sm, clamp(56px, 7vw, 80px)); padding-bottom: var(--mk-sec-sm, clamp(56px, 7vw, 80px)); }
.mk-cruise-line .mkl-back-link {
	font-family: 'Montserrat', system-ui, sans-serif; font-size: 0.875rem; font-weight: 600;
	letter-spacing: 0.04em; color: var(--mk-teal-text, #0d7f85); text-decoration: none;
	border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.mk-cruise-line .mkl-back-link:hover,
.mk-cruise-line .mkl-back-link:focus-visible { border-bottom-color: currentColor; }

/* ============================================================================================
 * §2c ENQUIRY CARD IN THE ARGUMENT BAND — PROPOSED 2026-08-10, PO review pending
 * --------------------------------------------------------------------------------------------
 * Prose stays at the 46rem reading measure. What changes is what sits BESIDE it: at 1440 the page
 * was one left column with ~505px empty to its right on every band — 35% of the viewport. Generous
 * margin on Carnival's 335-word argument; an unfinished page on a 70-word one, and nine of the
 * eleven lines are nearer 70.
 *
 * ⛔ THE MEASURE IS NOT WIDENED. Widening would cure the emptiness by damaging the reading, and the
 * reading is the part that is currently right. The dead column takes the page's single action
 * instead — strongest exactly where the page is thinnest, because the less we can say about a line
 * the more the page is really an invitation to ask.
 *
 * Below 1024 it stacks under the prose, where it reads as a natural close to the section.
 * ========================================================================================== */
.mk-cruise-line .mkl-argument-aside { margin: 32px 0 0; }
.mk-cruise-line .mkl-enqcard {
	background: var(--mk-ink, #1a1a1a); color: var(--mk-white, #fff);
	border-radius: var(--mk-r-card, 16px);
	padding: 26px 24px 24px;
	box-shadow: var(--mk-shadow);
}
.mk-cruise-line .mkl-enqcard-title {
	margin: 0 0 16px; font-size: 1.0625rem; font-weight: 700; line-height: 1.35;
}
.mk-cruise-line .mkl-enqcard-trust {
	list-style: none; margin: 0 0 20px; padding: 0 0 18px 0;
	border-bottom: 1px solid rgba(255,255,255,0.16);
	font-size: 0.8125rem; color: rgba(255,255,255,0.76);
}
.mk-cruise-line .mkl-enqcard-trust li { position: relative; padding-left: 15px; margin-bottom: 6px; }
.mk-cruise-line .mkl-enqcard-trust li::before {
	content: ''; position: absolute; left: 0; top: 0.52em;
	width: 5px; height: 5px; border-radius: 50%; background: var(--mk-teal, #00c2cb);
}
/* ⛔ THE FIRST-FOLD CTA MUST READ AS A BUTTON — G-2 fix, PO 2026-08-13, ALL ELEVEN LINE PAGES.
   The base `.mk-cta` is an INK fill with white text. The enquiry card is ALSO ink
   (`.mkl-enqcard` → `--mk-ink`), so the button was ink-on-ink: no edge, no shape, and on the
   rendered page it read as a line of centred text rather than the page's primary action. It is the
   first CTA a reader meets at 1440, on nine pages that otherwise passed.

   MATCHED TO THE HUB'S FIRST-FOLD CTA, and the mechanism is worth stating because it is not what
   the phrase "add a border" implies: the hub's button carries `border-width: 0` and gets its edge
   from a WHITE FILL against the dark hero (`.mkc-hero-ctas .mk-cta`, cruises.css). So matching it
   means inverting the fill, not drawing an outline. The explicit white border below is belt and
   braces — it keeps a visible edge if the fill is ever themed away, and it costs nothing.

   Scoped to `.mkl-enqcard-cta`, so every other `.mk-cta` on the page — the fleet band, the deals
   band, the empty states — is untouched and stays ink-on-white where that is correct. */
.mk-cruise-line .mkl-enqcard-cta {
	display: block; width: 100%; text-align: center;
	background: #ffffff;
	color: var(--mk-ink) !important;
	border: 1px solid #ffffff;
	font-weight: 700;
}
.mk-cruise-line .mkl-enqcard-cta:hover,
.mk-cruise-line .mkl-enqcard-cta:focus-visible {
	background: var(--mk-alt-surface, #f2f5f6);
	border-color: var(--mk-alt-surface, #f2f5f6);
	color: var(--mk-ink) !important;
}
.mk-cruise-line .mkl-enqcard-note {
	margin: 12px 0 0; font-size: 0.8125rem; color: rgba(255,255,255,0.6); text-align: center;
}

@media (min-width: 1024px) {
	.mk-cruise-line .mkl-argument-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 56px;
		align-items: start;
	}
	/* The 46rem cap already governs the prose; inside a grid track it needs no second constraint,
	   and leaving it lets the column breathe to the track width on a narrow laptop. */
	.mk-cruise-line .mkl-argument-aside { margin: 0; }
}

/* ---- §2d IDENTITY ROWS IN THE ANCHORED COLUMN (PO ruling 2026-08-10) ------------------------
   The identity rows moved out of a full-width band and in beside the argument, so the right column
   runs the LENGTH of the reading instead of anchoring one band while three drifted left.

   Label/value pairs are the right shape for a narrow column — short label, sentence beneath. In the
   old full-width band they sat 3-across and left most of the row empty on a two-row line, which was
   the same emptiness this whole change exists to remove, one band further down.

   The card sits BELOW the rows: the identity is what earns the enquiry, so it reads first and the
   action closes the column. */
.mk-cruise-line .mkl-identity--aside { margin: 0 0 28px; }
.mk-cruise-line .mkl-identity--aside .mk-section-eyebrow { margin-bottom: 16px; }
.mk-cruise-line .mkl-identity--aside .mkl-identity-list { display: block; margin: 0; }
.mk-cruise-line .mkl-identity--aside .mkl-identity-item {
	padding: 0 0 14px; margin: 0 0 14px;
	border-bottom: 1px solid var(--mk-border, #e5e7eb);
}
.mk-cruise-line .mkl-identity--aside .mkl-identity-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.mk-cruise-line .mkl-identity--aside dt {
	font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide, 0.12em); color: var(--mk-teal-text, #00787b);
	margin: 0 0 5px;
}
.mk-cruise-line .mkl-identity--aside dd {
	margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--mk-ink, #1a1a1a);
}

@media (min-width: 1024px) {
	/* Wider than the 320px the card alone needed — an identity VALUE is a sentence, and 320px broke
	   several of them to four and five lines. */
	.mk-cruise-line .mkl-argument-grid { grid-template-columns: minmax(0, 1fr) 366px; gap: 64px; }
	/* NOT sticky any more. A column that now runs the full height of the reading has nothing to
	   follow the reader with, and a sticky block taller than the viewport scrolls badly — it pins,
	   then jumps. Sticky was right for a short card and is wrong for a full column. */
	.mk-cruise-line .mkl-argument-aside { position: static; }
}

/* ============================================================================================
   §4b THE ROUTE · §4c THE DEPARTURES BOARD — added 2026-08-10 (Havila, PO ruling: Shape B stands)
   ============================================================================================
   The board itself is styled by its own component (`mykish-cruise-schedule.php`), which carries a
   stylesheet emitted once per request — the same deliberate arrangement the route map uses, for
   the reason both files record: an enqueue must be wired per consumer, and a consumer that forgets
   it renders the component naked while every markup check stays green. What lives HERE is only
   the band chrome around them, which is this template's business. */

.mk-cruise-line .mkl-route-intro,
.mk-cruise-line .mkl-sched-intro { max-width: 62ch; margin: 0 0 26px; }

/* --- the day-by-day call list -----------------------------------------------------------------
   A numbered list, because the ORDER is the fact. `Day 7` is the Kirkenes turnaround and the two
   halves mirror each other around it — which a reader can see in this list and cannot see in a
   count. That mirroring is exactly what "34 ports" concealed. */
.mk-cruise-line .mkl-route-days { list-style: none; margin: 26px 0 0; padding: 0; }
.mk-cruise-line .mkl-route-day {
	display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px;
	padding: 11px 0; border-top: 1px solid var(--mk-border, #e5e7eb);
	align-items: baseline;
}
.mk-cruise-line .mkl-route-day:last-child { border-bottom: 1px solid var(--mk-border, #e5e7eb); }
.mk-cruise-line .mkl-route-daynum {
	font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide, 0.12em); color: var(--mk-teal-text, #00787b);
	white-space: nowrap;
}
.mk-cruise-line .mkl-route-ports {
	font-size: 0.9375rem; line-height: 1.6; color: var(--mk-ink, #1a1a1a);
}
.mk-cruise-line .mkl-route-note {
	margin: 18px 0 0; max-width: 62ch;
	font-size: var(--mk-fs-small, 0.8125rem); line-height: 1.65; color: var(--mk-grey, #6b7280);
}

/* The board band's CTA needs the same air the fleet band's gets. */
.mk-cruise-line .mkl-sched-band .mk-cta { margin-top: 28px; }

@media (max-width: 559px) {
	/* Day number above its ports rather than beside them — at 390 the two-column grid left the
	   port run about 18 characters wide and every day wrapped to four lines. */
	.mk-cruise-line .mkl-route-day { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

/* ============================================================================================
   §4d THE FLEET IN PICTURES · §4e THE NORTHERN LIGHTS — added 2026-08-10
   ============================================================================================ */

.mk-cruise-line .mkl-hulls-intro,
.mk-cruise-line .mkl-aurora-intro { max-width: 62ch; margin: 0 0 30px; }

/* --- per-hull strips ---------------------------------------------------------------------------
   A horizontal scroller per hull rather than a grid: the counts are deliberately uneven (4 · 5 · 3 ·
   12) and a grid would either leave ragged holes under Polaris or force Pollux into a wall. A strip
   reads the same at any count, which is the property that matters when the number is a fact about
   the photography rather than a design choice. */
.mk-cruise-line .mkl-hull { margin: 0 0 34px; }
.mk-cruise-line .mkl-hull:last-child { margin-bottom: 0; }
.mk-cruise-line .mkl-hull-name {
	display: flex; align-items: center; gap: 10px;
	font-size: 1.0625rem; font-weight: 700; color: var(--mk-ink, #1a1a1a);
	margin: 0 0 12px; padding: 0 0 10px;
	border-bottom: 1px solid var(--mk-border, #e5e7eb);
}
.mk-cruise-line .mkl-hull-count {
	font-size: 0.6875rem; font-weight: 700; color: var(--mk-teal-text, #00787b);
	background: var(--mk-alt-surface, #f0f4f5); border-radius: 999px; padding: 3px 9px;
	letter-spacing: var(--mk-track-wide, 0.12em);
}
.mk-cruise-line .mkl-hull-strip {
	display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 2px 2px 10px; margin: 0 -2px;
	-webkit-overflow-scrolling: touch;
}
/* ⛔ FIXED HEIGHT, NATURAL WIDTH — NOT a fixed aspect ratio with object-fit:cover.
   23 of the 24 hull frames are landscape and one is PORTRAIT (the Capella winter shot), and a 3:2
   centre-crop removed exactly the stern lettering that is the only reason that frame is
   attributable to Capella at all. A filmstrip keyed on HEIGHT takes any orientation without
   cropping: portrait frames simply come out narrow. **Nothing in this band is cropped, so no crop
   can contradict an alt.** */
.mk-cruise-line .mkl-hull-fig { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.mk-cruise-line .mkl-hull-img {
	display: block; height: clamp(168px, 21vw, 232px); width: auto; max-width: none;
	border-radius: var(--mk-r-card, 16px); background: var(--mk-alt-surface, #f0f4f5);
}

/* --- aurora ------------------------------------------------------------------------------------
   Lead frame full-width, the rest a quiet grid. These are night photographs: they carry themselves
   and want space, not chrome. */
/* ⛔ NO FORCED RATIOS ANYWHERE IN THIS BAND, and the reason is an alt, not a taste.
   Five of the thirteen aurora frames are PORTRAIT. The first build led with one and cropped it to
   16:9, which removed the ship's bow from the bottom of the frame — leaving an alt that named a bow
   the reader could not see, in a band whose heading claims these are shot FROM Havila's ships.
   A cropped photograph can make its own alt false. So: the lead keeps its natural ratio, and the
   rest run in CSS columns, which take mixed orientation without cropping anything. */
.mk-cruise-line .mkl-aurora-lead { margin: 0 0 16px; }
.mk-cruise-line .mkl-aurora-lead-img {
	display: block; width: 100%; height: auto;
	border-radius: var(--mk-r-card, 16px); background: var(--mk-ink, #1a1a1a);
}
.mk-cruise-line .mkl-aurora-grid { column-count: 2; column-gap: 14px; }
.mk-cruise-line .mkl-aurora-fig { margin: 0 0 14px; break-inside: avoid; }
.mk-cruise-line .mkl-aurora-img {
	display: block; width: 100%; height: auto;
	border-radius: var(--mk-r-card, 16px); background: var(--mk-ink, #1a1a1a);
}
.mk-cruise-line .mkl-aurora-note {
	margin: 20px 0 0; max-width: 62ch;
	font-size: var(--mk-fs-small, 0.8125rem); line-height: 1.65; color: var(--mk-grey, #6b7280);
}

@media (min-width: 720px) {
	.mk-cruise-line .mkl-aurora-grid { column-count: 4; }
}

/* ============================================================================================
   §4f NORTHERN LIGHTS PROMISE · §5 OFFER CARDS — added 2026-08-10
   ============================================================================================ */

/* --- the promise -------------------------------------------------------------------------------
   Quotes are set as quotes, not as decorated marketing. The whole point of this band is that it
   reproduces a supplier's TERMS, and terms should look like terms. */
.mk-cruise-line .mkl-promise-lead { max-width: 62ch; margin: 0 0 22px; }
.mk-cruise-line .mkl-promise-quote {
	margin: 0 0 22px; padding: 0 0 0 20px;
	border-left: 3px solid var(--mk-teal, #00c2cb);
}
.mk-cruise-line .mkl-promise-quote p {
	margin: 0; max-width: 60ch;
	font-size: 1.0625rem; line-height: 1.6; color: var(--mk-ink, #1a1a1a);
}
.mk-cruise-line .mkl-promise-quote--def { border-left-color: var(--mk-ink, #1a1a1a); }
.mk-cruise-line .mkl-promise-def { margin: 0 0 12px; max-width: 62ch; }
.mk-cruise-line .mkl-promise-terms {
	display: grid; gap: 14px; margin: 0 0 24px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.mk-cruise-line .mkl-promise-terms dt {
	font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide, 0.12em); color: var(--mk-teal-text, #00787b);
	margin: 0 0 4px;
}
.mk-cruise-line .mkl-promise-terms dd { margin: 0; font-size: 0.9375rem; color: var(--mk-ink, #1a1a1a); }
.mk-cruise-line .mkl-promise-note {
	margin: 0; max-width: 62ch;
	font-size: var(--mk-fs-small, 0.8125rem); line-height: 1.65; color: var(--mk-grey, #6b7280);
}

/* --- offer cards -------------------------------------------------------------------------------
   ⛔ THERE IS NO STRUCK-THROUGH PRICE STYLE IN THIS FILE, DELIBERATELY. The supplier publishes one
   and we do not carry it (a compare-at with no named rack rate — the R7 bar that killed Viking's).
   Not defining the style is a second lock on the first: a later session cannot render a compare-at
   without adding both the field and the CSS, and being seen to do both. */
.mk-cruise-line .mkl-offer { margin: 0 0 30px; }
.mk-cruise-line .mkl-offer-title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; }
.mk-cruise-line .mkl-offer-blurb { max-width: 62ch; margin: 0 0 18px; }
.mk-cruise-line .mkl-offer-window {
	display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 20px;
	padding: 14px 16px; border-radius: var(--mk-r-card, 16px);
	background: var(--mk-alt-surface, #f0f4f5);
}
.mk-cruise-line .mkl-offer-window dt {
	font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide, 0.12em); color: var(--mk-teal-text, #00787b); margin: 0 0 3px;
}
.mk-cruise-line .mkl-offer-window dd { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.mk-cruise-line .mkl-offer-fares { display: grid; gap: 12px; margin: 0 0 18px; }
.mk-cruise-line .mkl-fare {
	display: grid; gap: 4px; padding: 16px;
	border: 1px solid var(--mk-border, #e5e7eb); border-radius: var(--mk-r-card, 16px);
}
.mk-cruise-line .mkl-fare-name { font-weight: 700; font-size: 1rem; color: var(--mk-ink, #1a1a1a); }
.mk-cruise-line .mkl-fare-route { font-size: 0.875rem; color: var(--mk-teal-text, #00787b); font-weight: 600; }
.mk-cruise-line .mkl-fare-meta { font-size: 0.8125rem; color: var(--mk-grey, #6b7280); }
.mk-cruise-line .mkl-fare-price { margin-top: 6px; font-size: 1.375rem; color: var(--mk-ink, #1a1a1a); }
.mk-cruise-line .mkl-fare-from {
	font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide, 0.12em); color: var(--mk-grey, #6b7280); margin-right: 6px;
}
.mk-cruise-line .mkl-fare-cta { justify-self: start; margin-top: 12px; }
.mk-cruise-line .mkl-offer-basis {
	margin: 0; max-width: 66ch;
	font-size: var(--mk-fs-small, 0.8125rem); line-height: 1.65; color: var(--mk-grey, #6b7280);
}

@media (min-width: 720px) {
	.mk-cruise-line .mkl-offer-fares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- offer: mechanism, inclusions and terms — added 2026-08-10 (v1.1) -------------------------- */
.mk-cruise-line .mkl-offer-mech { max-width: 62ch; margin: 0 0 18px; font-size: 1.0625rem; }
.mk-cruise-line .mkl-offer-incl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0 0 18px; }
.mk-cruise-line .mkl-incl {
	display: flex; align-items: baseline; gap: 10px; padding: 14px 18px;
	border: 1px solid var(--mk-border, #e5e7eb); border-radius: var(--mk-r-card, 16px);
}
.mk-cruise-line .mkl-incl-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--mk-track-wide, 0.12em); color: var(--mk-teal-text, #00787b); }
.mk-cruise-line .mkl-incl-value { font-size: 1.375rem; font-weight: 700; color: var(--mk-ink, #1a1a1a); }
.mk-cruise-line .mkl-incl-per { font-size: 0.8125rem; color: var(--mk-grey, #6b7280); }
.mk-cruise-line .mkl-incl-cta { flex: 0 0 auto; }
/* Terms sit WITH the figure, never behind a link — on the deposit offer they carry the top-up. */
.mk-cruise-line .mkl-offer-terms {
	margin: 0 0 16px; padding: 0 0 0 20px; max-width: 66ch;
	font-size: var(--mk-fs-small, 0.8125rem); line-height: 1.7; color: var(--mk-grey, #6b7280);
}
.mk-cruise-line .mkl-offer-terms li { margin: 0 0 5px; }
.mk-cruise-line .mkl-offer { padding: 0 0 30px; border-bottom: 1px solid var(--mk-border, #e5e7eb); }
.mk-cruise-line .mkl-offer:last-of-type { border-bottom: 0; padding-bottom: 0; }
/* The first offer heading was colliding with the band h2 and read as its subtitle. */
.mk-cruise-line .mkl-deals .mkl-h2 { margin-bottom: 26px; }
.mk-cruise-line .mkl-offer + .mkl-offer { padding-top: 28px; }