Article Develop

Three modes:

• Classic tour — .article-shell (alias .article-main) + sidebar. Reference: article-default.html.
• Full — article.article-full, no sidebar; sections + w-*. Reference: article-full-width-ar.html.
• Forbidden mix — half of the story in L/R, then full siblings, then more LEFT text. On mobile the sidebar jumps into the middle of reading.

Classic DOM (PC + mobile):

hero → article-shell → [ article-flow | article-sidebar | article-below ] → reviews (outside shell)

• .article-flow — PC row 1 LEFT (beside sticky sidebar). Short intro: about, photos, highlights.
• .article-sidebar — PC row 1 RIGHT, sticky. Mobile order: 3 (after all body text).
• .article-below — PC full shell width (grid-column: 1 / -1). From itinerary downward. Mobile order: 2.
• Reviews / outro — sibling after .article-shell, not between LEFT chunks.

Widths:

• .w-shell / .w-content / .w-narrow — max-width inside the page (shell ≈ 1200px, content ≈ column without sidebar, narrow ≈ 720px).
• .w-breakout — background / band to viewport width (escapes .article-shell). Put readable text in an inner .w-content / .w-shell.
• *-box panels — same outer width helper; px-* on the outer wrapper, not on the coloured box itself when pairing boxes.

class="" order: semantics / layout / w-* first; then margin; then padding — e.g. w-breakout bg-white my-6 p-6.

Covers: suffix *-block — .process-block, .stories-block (alias .stories-salon), .practical-block.

DONT: full-width sibling between parts of LEFT content while a sidebar exists; px-5 on section.ancestry-box when a sibling .practical-box sits inside a padded outer (widths diverge); Bulma my-* alone on empty divider nodes (use .my-*rem).

Empty separator between sections. Bulma my-6 on an empty block collapses — use shared .my-3rem / .my-6rem / .my-9rem. Height via .vh-0-25 / .vh-0-50 / .vh-1. Colour via .bg-*. Width via .w-shell (or .w-content). In class="": layout first, then margin, then padding if any — e.g. vh-0-25 bg-gold w-shell my-6rem.

.vh-0-25.bg-gold.w-shell.my-3rem

.vh-0-50.bg-gold.w-content.my-3rem

.vh-1.bg-dark.w-shell.my-3rem

.vh-0-25.bg-red.w-narrow.my-3rem

Default between major article blocks:

<div class="vh-0-25 bg-gold w-shell my-6rem"></div>

On article.article-full pages there is no shell grid. Sibling section elements use helpers from _shared.scss:

• .w-shell — full article shell (--article-shell, ~1200px)
• .w-content — classic content-column width (shell − sidebar − gap)
• .w-narrow — narrow readable / optional tight CTA
• .w-breakout — viewport-wide band (see demo in .article-below above)

Cover blocks use the shared suffix *-block.