/* SCANDINAVIA HUB — /destinations/scandinavia/ only.
*
* Spec: docs/design/DESIGN_BRIEF_SCANDINAVIA.md (PO-APPROVED 1 Aug 2026).
* Density targets: docs/design/DENSITY_ANATOMY.md. Precedent: /home-v2/ at commit 4e79aaa.
*
* TWO STYLESHEETS LOAD ON THIS PAGE, DELIBERATELY.
* home-v2.css — loaded FIRST. It is no longer "the home-v2 sheet"; it is where the ratified
* density band system lives (`.mkv-band--dark`, `.mkv-band--feature` + the glass
* panel, `.mkv-band--split`, `.mkv-tile`, `.mkv-review`, `.mkv-guide`,
* `.mk-container--wide`). S2, S7, S8, S9 and S10 below reuse those classes
* VERBATIM rather than reimplementing them.
* scandinavia.css (this file) — only what is genuinely new to this page.
*
* WHY, and it is the brief's instruction rather than a convenience: "PORT, DO NOT REBUILD. S8
* reviews from /home-v2/ section6, S9 Rahul from /home-v2/ S4. Both are ratified. Rebuilding them
* creates drift between two pages that must read as one site." Copying those rules into an `mks-`
* namespace would create exactly two copies of a ratified recipe, which is the failure mode the
* GLASS-PANEL LAW was written about: a recipe that lives in one template and is inherited by none.
*
* NAMESPACE: everything new here is `mks-` (Mykish Scandinavia). It cannot collide with `mk-`
* (shared chrome) or `mkv-` (the density band system).
*
* TOKENS ONLY — no hardcoded colour, spacing, radius, type size or easing that has a token in
* mykish-design-tokens/tokens.css. Enqueued with filemtime() versioning (ASSET-VERSION law).
*
* TWO LAWS ARE LOAD-BEARING IN EVERY SECTION BELOW AND ARE NOT TUNING SURFACES:
* GLASS-PANEL LAW — any panel over photography uses the ratified recipe (gradient 0.28→0.08,
* blur 2px, saturate 1.15, 1px top-edge highlight). Legibility is carried by TEXT HALOS,
* never by a darker fill. Re-darkening a fill is a golden-rule-class regression.
* BRIGHT-HERO — no full-bleed dim anywhere. Local, anchored gradients only.
* Most of this page's type-over-photography carries NO panel at all: a bottom-anchored local
* gradient plus the halo ladder, which is the leanest treatment the law sanctions and leaves the
* top of every photograph completely untouched.
*
* ELEMENT+CLASS PINNING is used on every heading. `.mk-page h2.mks-x`, never `.mks-x`. The
* Elementor Global Kit prints `.elementor-kit-6 h1{color:#1a1a1a}` and `h2{...}` (one class + one
* element) which ties or beats a plain single-class rule depending on print order. That cascade has
* silently painted white-on-photo headings near-black THREE times in this build (h1 colour, pill
* font-size, h2 colour). It is systemic, not bad luck.
*/
/* ============================================================================================
* BAND PADDING — the density law, applied by what each band CONTAINS
*
* Brief §2: "band padding: 0–40px photographic and dark bands, 88px text bands. Not uniform."
* That is the measured finding from DENSITY_ANATOMY: the reference's air lives INSIDE its imagery
* (174px on its hero, 0/0 on every other band); ours was 140px top AND bottom on every band, so
* ~280px of dead vertical space sat between every pair of blocks.
*
* The `.mkv-band--dark` override below is scoped to THIS PAGE'S BODY CLASS. home-v2 keeps its own
* 56–88px and is provably unchanged: `.mk-scandinavia-hub` never appears on that page.
* ============================================================================================ */
.mk-scandinavia-hub .mkv-band--dark { padding: clamp(32px, 3.4vw, 40px) 0; }
.mk-scandinavia-hub .mk-section { padding: clamp(56px, 6vw, 88px) 0; }
/* =========================================================== §3 THE FOUR PROPERTIES — SIGNATURE ==
*
* THE SPINE OF THE PAGE. Brief: "The spine of the page and the thing it is remembered by. Spend the
* boldness here; keep everything else disciplined."
*
* COMPOSITION — a 2x2 of large photographic tiles on the dark ground, 14px gutters, wide container
* (1280 of 1440 = 88.9%). Four tiles at ~633 x 490 each read as four PROPERTIES, not four cards:
* big enough that the photograph is the subject and the type is a caption on it, which is the
* inversion the density work was about. A 4-up row was rejected — at 1440 each column would be
* ~310px, too narrow for a property name plus two lines plus chips, and it would have made the one
* typographic tile read as a gap in a row rather than a quarter of a composition.
*
* NO PANEL ON THESE TILES, BY CHOICE. The GLASS-PANEL LAW governs panels over photography; it does
* not require one. Four glass panels stacked in a 2x2 would read as four boxes. Instead each tile
* carries ONE bottom-anchored local gradient (bright-hero: local, never full-bleed) and the type
* carries the halo ladder — which the law names as the legibility mechanism. The top ~55% of every
* photograph is therefore completely untouched, and `slabsOverPhoto` is empty by construction.
*/
.mks-props { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .mks-props { grid-template-columns: 1fr 1fr; } }
.mks-prop {
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
min-height: clamp(340px, 34vw, 500px);
padding: clamp(22px, 2.4vw, 34px);
border-radius: var(--mk-r-card);
text-decoration: none;
background: var(--mk-ink-canvas);
transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease);
}
.mks-prop:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow-lg); }
.mks-prop:focus-visible { outline: 2px solid var(--mk-gold); outline-offset: 3px; }
/* THE SOCKET. `.mks-prop-media` is empty on the typographic tile and holds one ![]()
on the other
* three. Filling it is a one-line change — an attachment id in the array in scandinavia-hub.php —
* with no markup, no CSS and no JS to touch. Same pattern as `.mkv-tile-media` on /home-v2/ §4. */
.mks-prop-media { position: absolute; inset: 0; }
.mks-prop-media img {
display: block; width: 100%; height: 100%; object-fit: cover;
transition: transform 900ms var(--mk-ease-out);
}
.mks-prop:hover .mks-prop-media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
.mks-prop-media img, .mks-prop:hover .mks-prop-media img { transition: none; transform: none; }
}
/* ONE LOCAL, BOTTOM-ANCHORED GRADIENT PER TILE.
*
* RE-WEIGHTED AFTER LOOKING AT THE RENDER (ADR-007 G-2), because the first pass failed by eye while
* every number stayed green. Two tiles sit on BRIGHT photographs — Ranua's aerial is snow and pale
* sky almost edge to edge, and Kakslauttanen's igloos glow — and white type over them was close to
* unreadable at both widths. The instrument had certified the band on the FIRST tile only, which is
* why it did not show up as a number; that bug is fixed in scandi_probe.mjs.
*
* TWO LEVERS WERE USED, IN THE ORDER THE LAW NAMES THEM: the copy was cut to the brief's actual
* spec (TWO lines, not five — the over-long lines were mine, not the brief's), which drops the text
* block by roughly 120px on its own; and then the gradient ramps deeper and slightly higher. It is
* still LOCAL — fully transparent by 78% of the tile height, so the sky in every frame renders
* untouched — and it is a gradient on a photograph, not a fill on a panel. Re-darkening a PANEL
* fill is the golden-rule-class regression; a local anchored gradient is the sanctioned lever. */
.mks-prop-media::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top,
rgba(8,11,13,0.94) 0%,
rgba(8,11,13,0.88) 16%,
rgba(8,11,13,0.72) 32%,
rgba(8,11,13,0.44) 50%,
rgba(8,11,13,0.16) 66%,
rgba(8,11,13,0) 78%);
}
/* THE TYPOGRAPHIC TILE — Santa Claus Holiday Village. PO HARD STOP: "ships as a typographic tile
* with a media socket. No stock substitute, ever."
*
* It is a composed treatment, not a placeholder, and it earns its own surface: a calm ink field
* with a single soft light source (the same restraint already shipping as `.mkv-hero-layer--type`
* on /home-v2/), plus one typographic ornament that no other tile can carry — the Arctic Circle
* latitude. That fact is sourced: the property "sits literally inside Santa Claus Village on the
* Arctic Circle" (resort 514, `why_mykish_recommends` / `honest_fit_copy`). So the quiet tile is
* quiet ON PURPOSE and says something the photographic ones cannot. */
.mks-prop--type {
background-color: var(--mk-ink-canvas);
background-image:
radial-gradient(120% 90% at 76% 10%, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0) 62%),
linear-gradient(152deg, #161c1f 0%, #0e1214 46%, #0a0d0f 100%);
border: 1px solid rgba(255,255,255,0.16);
}
.mks-prop--type:hover { border-color: rgba(255,255,255,0.34); }
.mks-prop-mark {
position: absolute; top: clamp(22px, 2.4vw, 34px); right: clamp(22px, 2.4vw, 34px);
font-size: var(--mk-fs-small); font-weight: 700;
letter-spacing: var(--mk-track-wide); text-transform: uppercase;
color: var(--mk-gold); opacity: 0.9; text-align: right; line-height: 1.5;
}
.mks-prop-body { position: relative; z-index: 1; display: block; max-width: 42ch; }
/* THE HALO LADDER — the only legibility lever on type over photography, per the law. Weighted by
* how much gradient is left underneath each element: the location eyebrow sits highest and carries
* the most, the link sits lowest on the densest part and carries the least. */
.mks-prop-loc, .mks-prop-name, .mks-prop-line {
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.74), 0 0 34px rgba(0,0,0,0.5);
}
.mks-prop-link, .mks-chip {
text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.82), 0 0 12px rgba(0,0,0,0.6);
}
/* WHERE GOLD MAY SIT, AND WHERE IT MAY NOT — a rule, arrived at by measurement.
*
* The first pass put Warm Gold on the location eyebrow and the package eyebrow, both of which sit
* ON A PHOTOGRAPH near the TOP of the text block, where the local gradient has already given up
* most of its ink. That measured fine for two runs and was wrong both times: the contrast scorer
* assumed the ink was WHITE. Warm Gold #d4a853 has a relative luminance of ~0.42, not 1.0, so
* scoring it as white overstated it by about 2x. With the scorer reading each element's real
* computed colour, the Kakslauttanen tile's eyebrow measured 3.62:1 and the Kakslauttanen package
* card's 3.54:1 — both under the 4.5 floor, and both visibly washed out in the render.
*
* THE RULE: gold is the accent on grounds we CONTROL — flat dark bands, white bands, the ink tile,
* and the LINK line, which sits at the very foot of a tile on ~0.94 alpha and measures 9.0:1 on
* every tile at both widths. Type sitting on a PHOTOGRAPH higher up in the block is WHITE, because
* no gradient can guarantee a backdrop there without becoming the full-bleed dim the bright-hero
* law forbids. Deepening the gradient to save an accent colour would be trading the photograph for
* the accent, and the law is explicit about which of those wins.
*
* The gold accent is not lost: it still carries every tile's link line, the Arctic Circle mark, the
* dark-band eyebrows, the guide numerals, the "all four" line and the Google 5.0 badge. */
.mk-page p.mks-prop-loc {
margin: 0 0 10px; font-size: var(--mk-fs-eyebrow); font-weight: 700;
letter-spacing: var(--mk-track-wide); text-transform: uppercase; color: var(--mk-white);
}
/* The typographic tile is the one place a location eyebrow sits on a ground we control, so gold is
safe there and the tile keeps the warmer treatment. NOT REACHABLE TODAY — the PO filled the Santa
Claus Holiday Village socket with attachment 707 on 2026-08-01, so all four tiles are now
photographic. Kept, not deleted: the socket is designed to empty again (the supplier pack swap),
and this is the rule that has to be right the moment it does. */
.mk-page .mks-prop--type p.mks-prop-loc { color: var(--mk-gold); }
.mk-page h3.mks-prop-name {
margin: 0 0 12px; color: var(--mk-white); font-weight: 700;
font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.12;
letter-spacing: var(--mk-track-tight); text-wrap: balance;
}
.mk-page p.mks-prop-line {
margin: 0 0 16px; color: rgba(255,255,255,0.92);
font-size: var(--mk-fs-body); line-height: 1.6;
}
/* INTENT CHIPS. Read live from each property's own `best_for_tags` (ACF), so they cannot drift
* from the property page. Hairline outline, no fill — a filled chip over a photograph would be a
* slab, however small. */
.mks-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; padding: 0; list-style: none; }
.mks-chip {
display: inline-block; padding: 4px 11px;
border: 1px solid rgba(255,255,255,0.42); border-radius: var(--mk-r-pill);
font-size: var(--mk-fs-eyebrow); font-weight: 600; letter-spacing: 0.04em;
color: rgba(255,255,255,0.94); white-space: nowrap;
}
.mk-page span.mks-prop-link {
display: inline-block; font-size: var(--mk-fs-small); font-weight: 700;
letter-spacing: var(--mk-track-cta); text-transform: uppercase; color: var(--mk-gold);
}
.mks-prop:hover .mks-prop-link { text-decoration: underline; text-underline-offset: 4px; }
/* THE CLAIM UNDER THE BAND. Brief: "Underneath this band sits the claim no competitor can make:
* the PO has personally stayed in all four." Sourced — `first_hand_visited_flag` is true on all
* four resort records. One line, one gold rule, no decoration. */
.mks-stayed {
margin: clamp(24px, 2.6vw, 34px) 0 0; padding-top: clamp(20px, 2.2vw, 26px);
border-top: 1px solid rgba(255,255,255,0.16);
font-size: var(--mk-fs-lead); line-height: 1.5; color: var(--mk-on-dark);
max-width: 62ch;
}
.mks-stayed strong { color: var(--mk-gold); font-weight: 700; }
/* ================================================================================== §1 HERO ==
*
* Brief: "full-bleed winter or aurora. H1, one line of support, one CTA. Bright-hero law. ~90%."
*
* ~90% of the first screen is photography, so the hero's own box is the instrument here: 90vh plus
* the sticky header is very close to a full first screen. The photograph is an ![]()
, not a CSS
* background, so it carries real alt text and can be given fetchpriority for LCP.
*
* NO PANEL. The type sits directly on the frame with the ratified local bottom-left gradient and
* the halo ladder. `.mk-hero-sub` from the shared sheet is deliberately NOT used: it carries
* `background: rgba(10,12,14,0.55)`, which is a fill above the 0.5 threshold sitting over a
* photograph — the `slabsOverPhoto` instrument would flag it, correctly. Contrast here is carried
* by the halo instead, which is what the law asks for.
*/
.mks-hero {
position: relative;
display: flex; align-items: flex-end;
min-height: clamp(620px, 90vh, 880px);
padding: 0 0 clamp(44px, 6vw, 88px);
background: var(--mk-ink-canvas);
color: var(--mk-white);
overflow: hidden;
}
@media (max-width: 767px) {
.mks-hero { min-height: clamp(560px, 86svh, 760px); }
}
.mks-hero-media { position: absolute; inset: 0; }
.mks-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* BRIGHT-HERO LAW — one LOCAL bottom-left-anchored gradient that falls to fully transparent before
* it reaches the top of the frame or the right edge. The ratified shape from HERO_OVERLAY_KILL.md,
* unchanged. The top-right quadrant of this photograph is never touched, and the probe samples it
* every run precisely so that a "fix" by dimming would show up as a number. */
.mks-hero-media::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(80% 130% at 0% 74%,
rgba(16,18,20,0.90) 0%,
rgba(16,18,20,0.80) 34%,
rgba(16,18,20,0.66) 58%,
rgba(16,18,20,0.36) 78%,
rgba(16,18,20,0) 96%);
}
@media (max-width: 767px) {
.mks-hero-media::after {
background:
linear-gradient(to top,
rgba(16,18,20,0.94) 0%,
rgba(16,18,20,0.88) 38%,
rgba(16,18,20,0.76) 62%,
rgba(16,18,20,0.50) 82%,
rgba(16,18,20,0.16) 94%,
rgba(16,18,20,0) 100%);
}
}
.mks-hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--mk-container); min-width: 0; }
.mk-page h1.mks-hero-title {
max-width: 15ch;
text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 8px rgba(0,0,0,0.9), 0 0 22px rgba(0,0,0,0.78), 0 0 44px rgba(0,0,0,0.56);
}
.mk-page p.mks-hero-sub {
margin: 0 0 clamp(24px, 2.6vw, 34px); max-width: 46ch;
font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--mk-white);
text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 6px rgba(0,0,0,0.88), 0 0 16px rgba(0,0,0,0.72), 0 0 30px rgba(0,0,0,0.46);
}
/* PRIMARY CTA ON A DARK GROUND. A8 pairs the primary CTA as ink fill / white text, which is correct
* on a white page and disappears on a photograph. Same ink/white pair, the way round the ground
* requires — identical to the ratified treatment in `.mkv-hero-ctas` on /home-v2/. A solid button
* is a CONTROL, not a panel; the `slabsOverPhoto` instrument reports controls separately for
* exactly this reason, so the reviewer sees the decision rather than having it filtered away. */
.mks-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.mks-hero-ctas .mk-cta {
background: var(--mk-white); color: var(--mk-ink) !important; border-color: var(--mk-white);
font-weight: 700;
}
.mks-hero-ctas .mk-cta:hover { background: var(--mk-alt-surface); border-color: var(--mk-alt-surface); color: var(--mk-ink) !important; }
/* ======================================================================= §2 POSITIONING ==
* Structure is `.mkv-band--split` from home-v2.css, reused verbatim (prose left at a readable
* measure, photography bleeding to the right edge — the pattern the density pass measured from
* 0% to 61.4% on /home-v2/ §2). Only the three positioning lines are new. */
.mks-lines { margin: 0; padding: 0; list-style: none; max-width: 54ch; }
.mks-lines li {
position: relative; margin: 0 0 18px; padding-left: 22px;
font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: #2a2c30;
}
.mks-lines li:last-child { margin-bottom: 0; }
.mks-lines li::before {
content: ''; position: absolute; left: 0; top: 0.72em;
width: 10px; height: 2px; background: var(--mk-gold);
}
.mks-lines strong { color: var(--mk-ink); }
/* ---- §2 SPLIT, MOBILE — the fix for a MEASURED 0% screen -----------------------------------
* FIRST RUN, MOBILE: `perScreenPct = [85.2, 0, 73.8, 92.3, 20.5]`. The second 844px sample window
* fell entirely inside the stacked §2 band, which at 390 is ~900px of copy above a 210px strip of
* imagery — an entire viewport of text with no photograph in it. That is exactly the defect
* DENSITY_ANATOMY names ("we have a screen with literally zero imagery") and the brief's ≥8%
* emptiest-screen floor exists to catch.
*
* FIX: on mobile the two frames stack VERTICALLY at real height and sit ABOVE the copy, so the band
* opens with ~600px of photography and no 844px window inside it can be text-only. Desktop is
* untouched — this whole block is inside `max-width: 899px`, where the split is already one column.
* Scoped to this page's body class so /home-v2/ §2 is provably unchanged. */
@media (max-width: 899px) {
/* SECOND PASS. Stacking both frames ABOVE the copy fixed the 0% window (0 -> 66.7%) and moved
* the hole one window down: the NEXT 844px window then landed on the ~940px of copy between the
* imagery and the §3 heading, and measured 3.4% — still under the ≥8% floor. Moving photography
* around inside a band only relocates a hole that is really about the band being one long block.
*
* So the two frames now sit ON EITHER SIDE of the copy: photograph, words, photograph, next
* band. No 844px window inside §2 can be text-only, because the longest unbroken run of copy is
* shorter than one window. `display: contents` dissolves the media wrapper so its two ![]()
* children become direct grid items and can be ordered around the copy — the wrapper keeps its
* `aria-hidden`, which still applies to the subtree, so nothing changes for a screen reader.
* Desktop is untouched: this whole block is inside `max-width: 899px`. */
.mk-scandinavia-hub .mkv-split { grid-template-columns: 1fr; }
.mk-scandinavia-hub .mkv-split-media { display: contents; }
.mk-scandinavia-hub .mkv-split-media img { min-height: 340px; width: 100%; }
.mk-scandinavia-hub .mkv-split-media img:first-of-type { order: -1; }
.mk-scandinavia-hub .mkv-split-media img:last-of-type { order: 1; }
.mk-scandinavia-hub .mkv-split-copy { order: 0; }
}
/* ===================================================================== §4 PACKAGES STRIP ==
* Brief: "teaser strip ... Photographic." A FULL-BLEED, NO-GUTTER three-column strip: the tiles
* butt against each other and run edge to edge, which is a deliberately different texture from
* §3's gutter grid so the two photographic bands do not read as the same object twice.
*
* Band padding is 0 — the photographs are the band's mass, which is the reference's own behaviour
* and the whole finding of DENSITY_ANATOMY. The heading gets its air from its own block. */
.mks-strip-band { padding: 0; background: var(--mk-white); }
.mks-strip-head {
max-width: var(--mk-container); margin: 0 auto;
padding: clamp(44px, 4.6vw, 64px) var(--mk-pad-x) clamp(22px, 2.2vw, 30px);
}
.mks-strip { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px) { .mks-strip { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mks-strip { grid-template-columns: repeat(3, 1fr); } }
.mks-pkg {
position: relative; display: flex; align-items: flex-end; overflow: hidden;
min-height: clamp(320px, 26vw, 420px);
padding: clamp(22px, 2.2vw, 30px);
text-decoration: none; background: var(--mk-ink-canvas);
}
.mks-pkg:focus-visible { outline: 2px solid var(--mk-gold); outline-offset: -4px; }
.mks-pkg-media { position: absolute; inset: 0; }
.mks-pkg-media img {
display: block; width: 100%; height: 100%; object-fit: cover;
transition: transform 900ms var(--mk-ease-out);
}
.mks-pkg:hover .mks-pkg-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
.mks-pkg-media img, .mks-pkg:hover .mks-pkg-media img { transition: none; transform: none; }
}
/* Same finding as §3 and the same fix: the Kakslauttanen card's photograph is a bright snow scene
* and its gold eyebrow was washing out against it. Deeper ramp, still fully transparent by 74% so
* the top of each frame is untouched. */
.mks-pkg-media::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top,
rgba(8,11,13,0.94) 0%,
rgba(8,11,13,0.86) 18%,
rgba(8,11,13,0.66) 36%,
rgba(8,11,13,0.34) 54%,
rgba(8,11,13,0.10) 66%,
rgba(8,11,13,0) 74%);
}
.mks-pkg-body { position: relative; z-index: 1; display: block; max-width: 34ch; }
.mks-pkg-eyebrow, .mks-pkg-title, .mks-pkg-meta, .mks-pkg-link {
text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 6px rgba(0,0,0,0.86), 0 0 16px rgba(0,0,0,0.7), 0 0 30px rgba(0,0,0,0.44);
}
/* Same rule as `.mks-prop-loc` above: this eyebrow sits on a photograph, so it is white. Measured
3.54:1 in gold on the Kakslauttanen card's bright snow frame — under the floor. */
.mk-page span.mks-pkg-eyebrow {
display: block; margin: 0 0 9px; font-size: var(--mk-fs-eyebrow); font-weight: 700;
letter-spacing: var(--mk-track-wide); text-transform: uppercase; color: var(--mk-white);
}
.mk-page span.mks-pkg-title {
display: block; margin: 0 0 10px; color: var(--mk-white); font-weight: 700;
font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; letter-spacing: var(--mk-track-tight);
}
.mk-page span.mks-pkg-meta {
display: block; margin: 0 0 14px; font-size: var(--mk-fs-small); line-height: 1.5;
color: rgba(255,255,255,0.86);
}
.mk-page span.mks-pkg-link {
display: block; font-size: var(--mk-fs-small); font-weight: 700;
letter-spacing: var(--mk-track-cta); text-transform: uppercase; color: var(--mk-white);
}
.mks-pkg:hover .mks-pkg-link { text-decoration: underline; text-underline-offset: 4px; }
/* ==================================================================== §5 EXPERIENCES ==
* Brief: "aurora, husky, reindeer, snowmobile, glass igloo, snow forest. Generic imagery permitted
* (no named-property claim). ENQUIRE NOW today. Each card carries a Bokun socket — same pattern as
* `.mkv-tile-media` on /home-v2/ §4 — so 861 lands tomorrow with no markup or CSS change."
*
* SHAPE: photograph on top, a real white body beneath. Deliberately NOT another gradient-and-type
* tile — §3 and §4 are both that, and a third would read as one long texture. It also gives the
* ENQUIRE NOW its own ground rather than floating it over a photograph.
*
* THE BOKUN SOCKET is `.mks-exp-widget`: an empty, `hidden` element in the DOM today. When 861
* lands, the widget mounts into it and the ENQUIRE NOW stays exactly where it is, on top. GR7 —
* no BOOK NOW anywhere on this page today, because no widget is live. */
.mks-exp-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .mks-exp-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mks-exp-grid { grid-template-columns: repeat(3, 1fr); } }
.mks-exp {
display: flex; flex-direction: column; overflow: hidden;
border: 1px solid var(--mk-border); border-radius: var(--mk-r-card);
background: var(--mk-white);
transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease);
}
.mks-exp:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow); }
.mks-exp-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mk-alt-surface); }
.mks-exp-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mks-exp-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(18px, 1.9vw, 24px); }
.mk-page h3.mks-exp-title {
margin: 0 0 8px; font-size: var(--mk-fs-h3); font-weight: 700;
letter-spacing: var(--mk-track-tight); line-height: var(--mk-lh-heading); color: var(--mk-ink);
}
.mks-exp-line { margin: 0 0 18px; font-size: var(--mk-fs-small); line-height: 1.6; color: var(--mk-grey); }
/* The socket. `hidden` keeps it out of the accessibility tree and out of layout until it holds a
* widget — an empty reserved box would be a hole on the page for however long 861 takes. */
.mks-exp-widget[hidden] { display: none; }
.mks-exp-cta {
margin-top: auto; align-self: flex-start;
display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
padding: 11px 22px; border-radius: var(--mk-r-btn);
background: var(--mk-ink); color: var(--mk-white) !important; text-decoration: none;
font-size: var(--mk-fs-small); font-weight: 700;
letter-spacing: var(--mk-track-cta); text-transform: uppercase;
transition: background var(--mk-dur) var(--mk-ease);
}
.mks-exp-cta:hover { background: var(--mk-teal-dark); color: var(--mk-white) !important; }
.mks-exp-cta:focus-visible { outline: 3px solid var(--mk-ink); outline-offset: 3px; }
/* ============================================================== §6 PLAN YOUR LAPLAND ==
* Brief: "guide rail, six cards to six pages ... SHIP AS STUBS AT CUTOVER (PO-ruled). Copy needs
* real sourcing — Visit Finland, Finnish Meteorological Institute, municipalities, plus the PO's
* own first-hand knowledge — and lands Sprint 1. Sourced-only applies: this content cannot be
* model-written."
*
* SO THERE IS NO BODY COPY HERE AND NO LINK. Writing a teaser line under each title would be
* model-written copy about Finland, which is the exact thing the ruling forbids; linking to a page
* that does not exist would be an orphan link. The stub is therefore a TYPOGRAPHIC INDEX: the six
* questions, numbered, with the honest action (ask Rahul) as the section's single CTA.
*
* The href socket is in the PHP array. When a guide page ships, its entry gains a URL and the item
* renders as an — no markup or CSS change here. */
.mks-guide-rail { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--mk-border); }
@media (min-width: 700px) { .mks-guide-rail { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mks-guide-rail { grid-template-columns: repeat(3, 1fr); } }
.mks-guide-item {
display: flex; align-items: baseline; gap: 14px;
padding: clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 24px) 0;
border-bottom: 1px solid var(--mk-border);
text-decoration: none; color: inherit;
}
.mks-guide-n {
flex: 0 0 auto; font-size: var(--mk-fs-small); font-weight: 700;
letter-spacing: var(--mk-track-wide); color: var(--mk-gold);
}
.mks-guide-q {
margin: 0; font-size: var(--mk-fs-h3); font-weight: 700;
line-height: var(--mk-lh-heading); letter-spacing: var(--mk-track-tight); color: var(--mk-ink);
text-wrap: balance;
}
a.mks-guide-item:hover .mks-guide-q { text-decoration: underline; text-underline-offset: 4px; }
a.mks-guide-item:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 2px; }
.mks-guide-note { margin: clamp(24px, 2.6vw, 34px) 0 20px; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: var(--mk-grey); max-width: 62ch; }
/* ==================================================================== §10 FINAL CTA ==
* Structure is `.mkv-band--feature` + `.mkv-feature-panel` from home-v2.css, reused verbatim —
* i.e. the RATIFIED GLASS RECIPE over a full-bleed photograph, not a second implementation of it.
* Only the button inside the panel is new. */
.mks-cta-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.mkv-feature-panel .mks-cta-actions .mk-cta {
background: var(--mk-white); color: var(--mk-ink) !important; border-color: var(--mk-white);
font-weight: 700;
}
.mkv-feature-panel .mks-cta-actions .mk-cta:hover { background: var(--mk-alt-surface); border-color: var(--mk-alt-surface); color: var(--mk-ink) !important; }
/* ============================================================ SHARED SMALL PIECES ==
* Gold eyebrow on the dark bands. DESIGN v1.1's palette assigns Warm Gold #d4a853 to trust
* signals and accents; the brief pins this page to "Gold accent only — no cyan". home-v2.css
* already moves `.mkv-eyebrow--on-dark` to gold, so the dark bands inherit correctly; this covers
* the eyebrows on the LIGHT bands, which would otherwise render in the shared sheet's teal. */
.mk-page .mk-scandinavia-hub-gold { color: var(--mk-gold); }
.mk-scandinavia-hub .mk-section-eyebrow { color: #8a6a1f; } /* AA-safe gold-on-white, 4.9:1 measured family */
.mk-scandinavia-hub .mkv-eyebrow--on-dark,
.mk-scandinavia-hub .mkv-eyebrow--gold { color: var(--mk-gold); }
.mk-scandinavia-hub .mk-section-heading { max-width: 24ch; }
/* GOLD ACCENT ONLY — brief §2, "no cyan. Authority: DESIGN v1.1 palette table."
*
* Caught by eye in the §9 crop: the ported Meet Rahul block's "More about Mykish" link rendered in
* `--mk-teal-text`, inherited from home-v2.css where teal is correct. On THIS page it is the one
* cyan thing in the content column and it reads as a stray. Every link accent inside `main` is
* pinned to the AA-safe gold instead.
*
* SCOPED TO `main` DELIBERATELY: the site header's own "Travels" wordmark and its active-nav
* underline are SHARED CHROME, identical on all 30-odd pages. Recolouring them here would make this
* one page's header differ from every other page's, which is a bigger inconsistency than the one it
* would fix. Flagged for the PO as a site-wide palette question, not decided in a page build. */
.mk-scandinavia-hub main a { color: #8a6a1f; }
.mk-scandinavia-hub main .mkv-guide-link a,
.mk-scandinavia-hub main .mks-guide-q { color: #8a6a1f; }
.mk-scandinavia-hub main .mkv-guide-link a { text-decoration: none; font-weight: 600; }
.mk-scandinavia-hub main .mkv-guide-link a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Links that already carry their own colour keep it — white on photography, gold on the dark bands,
ink inside a filled CTA. Listed rather than left to specificity luck. */
.mk-scandinavia-hub main a.mks-prop,
.mk-scandinavia-hub main a.mks-pkg,
.mk-scandinavia-hub main a.mkv-tile { color: inherit; }
.mk-scandinavia-hub main a.mk-cta { color: var(--mk-ink) !important; }
.mk-scandinavia-hub main a.mks-exp-cta { color: var(--mk-white) !important; }
.mk-scandinavia-hub main .mks-guide-q { color: var(--mk-ink); }
/* §7's lede is a plain lede on the dark band, not the §3 claim line — it had been borrowing
`.mks-stayed` plus four inline style overrides. Its own class instead. */
.mks-other-lede {
margin: 0 0 28px; max-width: 64ch;
font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: rgba(244,246,247,0.86);
}