/* =====================================================================================================
   Atlantic Surf Point - responsive, derived from the desktop design (the prototype only draws 1440).
   Every rule lives inside a max-width media query: desktop (>= 1404px) is never touched.
   Bands: <= 1403 (laptops: the 1340 container narrows), <= 1100 (tablet), <= 600 (phone).
   ===================================================================================================== */

/* ---------- <= 1403: fixed desktop widths may shrink with their row ---------- */
@media (max-width: 1403px) {
	#brx-content div:is([class*=" w-["], [class^="w-["]):not([class*="size-["]), #brx-footer div:is([class*=" w-["], [class^="w-["]) { max-width: 100%; }
	#brx-content div.shrink-0[class*=" w-["]:not([class*="size-["]):not([class*="min-w-full"]):not(:empty) { flex-shrink: 1; min-width: 0; }
	/* eyebrow labels wrap beside their fixed rule instead of overflowing it */
	[data-name="Eyebrow"] > p { flex-shrink: 1; min-width: 0; }
	/* collages and photo columns keep their box ratio while their width follows the row */
	.h-\[616px\].w-\[632px\] { width: auto; flex: 1 1 632px; height: auto; aspect-ratio: 632 / 616; max-width: 708px; }
	.h-\[616px\].w-\[632px\] > .size-\[520px\] { width: 82.3%; height: 84.4%; }
	.h-\[616px\].w-\[632px\] > .h-\[265px\] { width: 55.7%; height: 43%; }
	/* overscaled hero/CTA photos (absolute, % sizes) are fine; fixed-height heroes keep their height */
	[data-name="Activity gallery"] > *, [data-name="Index links"] > * { min-width: 0; }
	[data-name^="Activity preview"] .text-\[32px\] { white-space: nowrap; font-size: min(32px, 2.25vw); }
	/* wrapping rows with a fixed Figma height grow with their rows */
	#brx-content .flex-wrap[class*="h-["] { height: auto; }
	/* photos the prototype crops with % width + % height: once the frame changes shape, crop instead of distort */
	img.absolute.max-w-none:is([class*="h-["], .h-full):is([class*="w-["], .w-full) { object-fit: cover; }
	/* rows holding a rotated handwritten note let its corners show (the prototype clips only at desktop size) */
	.overflow-clip:has(> div > .flex-none > .font-\[\'Caveat\:Regular\'\]) { overflow: visible; }
	.overflow-clip:has([class*="rotate-"] > .font-\[\'Caveat\:Regular\'\]):not(:has(img)) { overflow: visible; }
}

/* ---------- <= 1100: tablet - tokens, stacked rows, drawer menu ---------- */
@media (max-width: 1100px) {
	:root {
		--rs-gutter: 32px;   /* side margin of every section */
		--rs-section: 96px;  /* padding-block of every content section */
		--rs-stack: 40px;    /* text block -> next block */
		--rs-hero: 72px;     /* hero / article display titles (desktop 116-142) */
		--rs-title: 56px;    /* section titles (desktop 64-104) */
		--rs-sub: 40px;      /* card titles (desktop 42-54) */
		--rs-figure: 120px;  /* giant activity numbers (desktop 176) */
		--rs-number: 64px;   /* display numbers (desktop 70-84) */
	}

	/* rhythm: one gutter, one section padding */
	#brx-content > *, #brx-content > .px-\[64px\], #brx-content > :not(.px-\[64px\]) > .px-\[64px\], #brx-header > .px-\[64px\], #brx-footer > .px-\[64px\] {
		padding-left: var(--rs-gutter); padding-right: var(--rs-gutter);
	}
	#brx-content > :not(.px-\[64px\]) { padding-left: 0; padding-right: 0; }
	#brx-content > :is([class*="pt-["], [class*="py-["]), #brx-content > * > .px-\[64px\]:is([class*="pt-["], [class*="py-["]) { padding-top: var(--rs-section); }
	#brx-content > :is([class*="pb-["], [class*="py-["]), #brx-content > * > .px-\[64px\]:is([class*="pb-["], [class*="py-["]) { padding-bottom: var(--rs-section); }
	#brx-content > .gap-\[56px\], #brx-content > .gap-\[64px\], #brx-content > .gap-\[61px\], #brx-content > .gap-\[51px\] { row-gap: var(--rs-stack); }
	#brx-content > .gap-\[72px\] { row-gap: max(var(--rs-stack), 36px); }   /* never under half of desktop */

	/* type scale: every display size of the prototype mapped to one tier, never above its desktop size (generated) */
	.text-\[96px\] { font-size: min(var(--rs-hero), 96px); }
	.text-\[100px\] { font-size: min(var(--rs-hero), 100px); }
	.text-\[102px\] { font-size: min(var(--rs-hero), 102px); }
	.text-\[104px\] { font-size: min(var(--rs-hero), 104px); }
	.text-\[108px\] { font-size: min(var(--rs-hero), 108px); }
	.text-\[112px\] { font-size: min(var(--rs-hero), 112px); }
	.text-\[116px\] { font-size: min(var(--rs-hero), 116px); }
	.text-\[124px\] { font-size: min(var(--rs-hero), 124px); }
	.text-\[142px\] { font-size: min(var(--rs-hero), 142px); }
	.text-\[60px\] { font-size: min(var(--rs-title), 60px); }
	.text-\[62px\] { font-size: min(var(--rs-title), 62px); }
	.text-\[64px\] { font-size: min(var(--rs-title), 64px); }
	.text-\[66px\] { font-size: min(var(--rs-title), 66px); }
	.text-\[68px\] { font-size: min(var(--rs-title), 68px); }
	.text-\[72px\] { font-size: min(var(--rs-title), 72px); }
	.text-\[76px\] { font-size: min(var(--rs-title), 76px); }
	.text-\[78px\] { font-size: min(var(--rs-title), 78px); }
	.text-\[80px\] { font-size: min(var(--rs-title), 80px); }
	.text-\[82px\] { font-size: min(var(--rs-title), 82px); }
	.text-\[92px\] { font-size: min(var(--rs-title), 92px); }
	.text-\[40px\] { font-size: min(var(--rs-sub), 40px); }
	.text-\[42px\] { font-size: min(var(--rs-sub), 42px); }
	.text-\[44px\] { font-size: min(var(--rs-sub), 44px); }
	.text-\[46px\] { font-size: min(var(--rs-sub), 46px); }
	.text-\[48px\] { font-size: min(var(--rs-sub), 48px); }
	.text-\[52px\] { font-size: min(var(--rs-sub), 52px); }
	.text-\[54px\] { font-size: min(var(--rs-sub), 54px); }
	.text-\[56px\] { font-size: min(var(--rs-sub), 56px); }
	.text-\[70\.11px\] { font-size: min(var(--rs-number), 70.11px); }
	.text-\[84px\] { font-size: min(var(--rs-number), 84px); }
	.text-\[176px\] { font-size: min(var(--rs-figure), 176px); }
	.text-\[176px\], .text-\[70\.11px\], .text-\[84px\] { height: auto; }
	/* text boxes sized by hand in Figma grow with their text */
	#brx-content p[class*="h-["], #brx-content p[class*="w-["]:not([class*="min-w-full"]) { height: auto; }
	.whitespace-nowrap.text-\[116px\], .whitespace-nowrap.text-\[72px\] { white-space: normal; }

	/* fixed-height section shells become content-sized */
	#brx-content > [class*="h-["]:not([class*="h-px"]), #brx-content > * > [class*="h-["][data-name$="content"] { height: auto; min-height: 0; }
	[data-name="Hero"][class*="h-["], [data-name="Activities hero"] { min-height: 560px; }
	[data-name="Hero"], [data-name="Activities hero"], [data-name="Article hero"] { row-gap: var(--rs-stack); }
	[data-name="Hero content"], [data-name="Hero body"] { height: auto; }
	/* article: the reading column keeps its gutter through its own width (the section has no padding on desktop) */
	[data-name="Article body"] { max-width: min(860px, calc(100% - 2 * var(--rs-gutter))); }
	[data-name="Article byline"] { flex-wrap: wrap; row-gap: 8px; }

	/* heading rows: title + handwritten note -> note wraps under the title */
	[data-name$="heading"].justify-between, [data-name="Section heading"], [data-name="CTA top"], [data-name="Hero top line"],
	[data-name="Article breadcrumb"], [data-name="Villa heading"], [data-name="Timeline heading"], [data-name="Index heading"] {
		flex-wrap: wrap; row-gap: var(--rs-stack); column-gap: 24px;
	}

	/* 2-column feature rows stack in desktop order */
	[data-name="Introduction"], [data-name="Camp content"], [data-name="The surf camp experience"], [data-name="Our program"],
	[data-name="Customized stay content"], [data-name="Group surf lessons"], [data-name="Family surf lessons"],
	[data-name="Private surf lessons"], [data-name="Which session fits you"] > [data-name="Hero"], [data-name="Overlapping editorial"],
	[data-name="Wingskate section"], [data-name="Kitesurfing information"], [data-name="Dune editorial"], [data-name="Future split"],
	[data-name="Our story"], [data-name="Contact and form"], [data-name="Frequently asked questions"].flex:not(.flex-col) {
		flex-direction: column; align-items: stretch; row-gap: var(--rs-stack); height: auto; width: 100%; align-self: stretch;
	}
	[data-name="Introduction"] > *, [data-name="Camp content"] > *, [data-name="The surf camp experience"] > *, [data-name="Our program"] > *,
	[data-name="Customized stay content"] > *, [data-name="Group surf lessons"] > *, [data-name="Family surf lessons"] > *,
	[data-name="Private surf lessons"] > *, [data-name="Which session fits you"] > [data-name="Hero"] > *, [data-name="Overlapping editorial"] > *,
	[data-name="Wingskate section"] > *, [data-name="Kitesurfing information"] > *, [data-name="Dune editorial"] > *, [data-name="Future split"] > *,
	[data-name="Our story"] > *, [data-name="Contact and form"] > *, [data-name="Frequently asked questions"].flex:not(.flex-col) > * {
		width: 100%; max-width: none; flex: 0 0 auto;
	}
	/* photo columns keep a desktop-like frame once stacked */
	/* stacked photo columns keep their desktop height (capped at 120vw), so captions/badges keep their spacing (generated) */
	[data-name="Camp photography"] { height: min(680px, 120vw); min-height: 0; }
	[data-name="Customized photography"] { height: min(480px, 120vw); min-height: 0; }
	[data-name="Detail photograph"] { height: min(420px, 120vw); min-height: 0; }
	[data-name="Dune photograph"] { height: min(760px, 120vw); min-height: 0; }
	[data-name="E-foil photograph"] { height: min(620px, 120vw); min-height: 0; }
	[data-name="Family photography"] { height: min(650px, 120vw); min-height: 0; }
	[data-name="Group photography"] { height: min(650px, 120vw); min-height: 0; }
	[data-name="Inline photograph"] { height: min(560px, 120vw); min-height: 0; }
	[data-name="Land and water photography"] { height: min(650px, 120vw); min-height: 0; }
	[data-name="Private photography"] { height: min(700px, 120vw); min-height: 0; }
	[data-name="Program photography"] { height: min(668px, 120vw); min-height: 0; }
	[data-name="Surf movement photograph"] { height: min(230px, 120vw); min-height: 0; }
	[data-name="Surfskate photograph"] { height: min(560px, 120vw); min-height: 0; }
	[data-name="Timeline photography"] { height: min(360px, 120vw); min-height: 0; }
	[data-name="Villa photography"] { height: min(680px, 120vw); min-height: 0; }
	[data-name="Wind photograph"] { height: min(622px, 120vw); min-height: 0; }
	.h-\[616px\].w-\[632px\] { flex: 0 0 auto; width: min(708px, 100%); align-self: center; }
	/* surfskate collage (700 x 650): scales with its desktop proportions */
	[data-name="Land and water photography"] { width: min(700px, 100%); height: auto; aspect-ratio: 700 / 650; align-self: center; }
	[data-name="Land and water photography"] > [data-name="Surfskate photograph"] { width: 80%; height: 86.15%; }
	[data-name="Land and water photography"] > [data-name="Surf movement photograph"] { left: 51.57%; top: 56.16%; width: 44.29%; height: 35.38%; }
	/* activity markers: the label shrinks beside the big number */
	[data-name="Activity marker"] > p:last-child { flex-shrink: 1; min-width: 0; overflow-wrap: normal; word-break: normal; }
	[data-name="Activity marker"] > p:first-child { width: auto; }
	/* kitesurfing photo band: content-sized, marker -> statement spacing within the desktop range */
	[data-name="Ocean action"] { height: auto; justify-content: flex-start; row-gap: 160px; }
	/* titles that sat in a hand-sized (taller) Figma box keep the visual space under them */
	#brx-content p.h-\[244px\] { margin-bottom: 24px; }

	/* boxes that filled a fixed-height desktop row now size to their content (flex: 1 0 0 + min-h-px would collapse) */
	.flex-col > .flex-\[1_0_0\].min-h-px { flex: 1 0 auto; }
	/* cards keep their desktop height as a minimum */
	[data-name="Experience block"] { min-height: 262px; }
	[data-name="Surf package preview"], [data-name="Raised package"] { min-height: 580px; }
	[data-name="Package image"] { min-height: 261px; }
	[data-name="Review card"] { min-height: 216px; height: auto; }
	[data-name="Room card"] { min-height: 611px; height: auto; }
	[data-name="Crew portrait"] { min-height: 700px; height: auto; }
	[data-name="Related article"] { min-height: 459px; }
	[data-name="Process step"] { min-height: 285px; height: auto; }
	[data-name="Principle"] { min-height: 369px; height: auto; }
	[data-name="Experience story"] { min-height: 420px; height: auto; }
	[data-name="Experience collage"] { height: auto; }
	[data-name="Experience column"] { height: auto; }
	/* room cards: the booking button (absolute in Figma) joins the flow at the end of the card */
	[data-name="Room card"] [data-name="Header actions"] { position: static; align-self: flex-end; margin-top: auto; }
	[data-name="Surf timeline"] > [data-name="Day moment"] { width: calc((100% - 24px) / 2); }
	/* long one-line labels may wrap below desktop (buttons and fitted phrases keep one line) */
	p.whitespace-nowrap:not(.asp-button p):not([data-fit]) { white-space: normal; }
	/* card grids: 3 -> 2 per row, 5 -> swipe row; nothing is dropped */
	[data-name="Package previews"], [data-name="Review cards"], [data-name="Room cards"], [data-name="Crew gallery"],
	[data-name="Related grid"], [data-name="Process"] { flex-wrap: wrap; height: auto; }
	[data-name="Package previews"] > *, [data-name="Review cards"] > *, [data-name="Room cards"] > *, [data-name="Crew gallery"] > *,
	[data-name="Related grid"] > *, [data-name="Process"] > * { flex: 0 0 calc((100% - 24px) / 2); min-width: 0; }
	[data-name="Activity gallery"] { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rs-gutter); }
	[data-name="Activity gallery"] > * { flex: 0 0 255px; scroll-snap-align: start; }
	[data-name^="Activity preview"] .text-\[32px\] { font-size: 32px; }
	/* handwritten notes longer than a short phrase may wrap; their fixed Figma boxes follow the text */
	.font-\[\'Caveat\:Regular\'\].whitespace-nowrap { white-space: normal; }
	/* rotated handwritten notes: their Figma box follows the (wrapped) text and stays inside the row */
	div.flex.items-center.justify-center[class*="h-["][class*="w-["]:has(> .flex-none):not(.min-w-full) { height: auto; width: auto; max-width: 100%; min-width: 0; flex-shrink: 1; margin-block: 6px; }
	div.flex.items-center.justify-center.min-w-full:has(> .flex-none) { height: auto; margin-block: 16px; }   /* a full-width rotated note lifts its corner */
	div.flex.items-center.justify-center:has(> .flex-none) > .flex-none { flex: 0 1 auto; min-width: 0; max-width: 100%; }
	[data-name="Index links"] { flex-wrap: wrap; row-gap: 24px; }
	[data-name="Index links"] > * { flex: 0 0 calc((100% - 48px) / 3); }
	[data-name="Experience grid"], [data-name="Belief feature row"], [data-name="Belief closing row"], [data-name^="row-"] { height: auto; }

	/* footer: brand on its own row, navigation and contact side by side */
	[data-name="Footer main"] { flex-wrap: wrap; row-gap: 40px; column-gap: 32px; }
	[data-name="Footer main"] > [data-name="Footer brand"] { flex: 0 0 100%; }
	/* legal row (credit + 4 legal links) wraps instead of clipping */
	[data-name="Footer legal"], [data-name="Legal links"] { flex-wrap: wrap; row-gap: 8px; white-space: normal; }
	[data-name="Footer legal"] { column-gap: 24px; row-gap: 32px; }

	/* header: burger + drawer (references/drawer-menu.*), logo and burger stay */
	.site-header__nav, .site-header__book { display: none; }
	.site-menu-toggle { display: inline-flex; }
}

/* ---------- <= 768: touch targets ---------- */
@media (max-width: 768px) {
	#brx-footer a, #brx-footer [data-name="Contact group"] a { min-height: 40px; min-width: 44px; display: inline-flex; align-items: center; }
	.asp-question { min-height: 44px; }
	[data-name="Share action"] { min-height: 44px; }
	a[data-name="Contact item"] { min-height: 44px; }
}

/* ---------- <= 600: phone ---------- */
@media (max-width: 600px) {
	:root {
		--rs-gutter: 20px;
		--rs-section: 72px;
		--rs-stack: 32px;
		--rs-hero: 48px;
		--rs-title: 40px;
		--rs-sub: 32px;
		--rs-figure: 88px;
		--rs-number: 48px;
	}
	[data-name$="heading"].justify-between, [data-name="Section heading"], [data-name="Villa heading"], [data-name="Timeline heading"], [data-name="Index heading"] {
		flex-direction: column; align-items: flex-start; row-gap: 40px;   /* a rotated note needs a little more air */
	}
	[data-name="Package previews"] > *, [data-name="Review cards"] > *, [data-name="Room cards"] > *, [data-name="Crew gallery"] > *,
	[data-name="Related grid"] > *, [data-name="Process"] > * { flex: 0 0 100%; }
	[data-name="Experience grid"], [data-name="Belief feature row"], [data-name="Belief closing row"], [data-name^="row-"], [data-name="Rating summary"],
	[data-name="Skills list"], [data-name="Field row"], [data-name="Footer main"] { flex-direction: column; }
	[data-name="Experience grid"] > *, [data-name="Belief feature row"] > *, [data-name="Belief closing row"] > *, [data-name^="row-"] > *,
	[data-name="Skills list"] > *, [data-name="Field row"] > *, [data-name="Footer main"] > * { width: 100%; flex: 0 0 auto; }
	[data-name="Index links"] > * { flex: 0 0 calc((100% - 24px) / 2); }
	/* button groups: one per row, full width (max 420) */
	[data-name="Hero actions"] { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }
	[data-name="Hero actions"] > * { width: 100%; }
	[data-name="Hero actions"] > * > p { width: 100%; text-align: center; }
	/* article: the photo + field-note pair stacks (photo keeps its 420px desktop height) */
	.asp-article .wp-block-group:has(> .wp-block-image) { flex-direction: column; }
	.asp-article .wp-block-group:has(> .wp-block-image) > * { width: 100%; flex: 0 0 auto; }
	.asp-article .wp-block-group:has(> .wp-block-image) > .wp-block-image { height: 420px; }
	/* article byline stays one row (desktop): 16px gaps, tighter tracking - the 11px text keeps its size */
	[data-name="Article byline"] { flex-wrap: nowrap; column-gap: 16px; letter-spacing: 0.4px; }
	[data-name="Experience block"] { min-height: 236px; }
	/* bordered list rows stacked one per line keep the desktop column gap as their row gap */
	[data-name="Program checklist"] { row-gap: 16px; }
	[data-name="Villa amenities"] { row-gap: 24px; }
	[data-name="Surf timeline"] > [data-name="Day moment"] { width: 100%; }
	/* "how it works" steps: 2 x 2 on phones */
	[data-name="Booking steps"] { flex-wrap: wrap; row-gap: 20px; }
	[data-name="Booking steps"] > * { flex: 0 0 calc((100% - 16px) / 2); width: auto; }
	/* article detail pair (photo + field note): stacked, the photo full width */
	.asp-article .wp-block-group:has(> .wp-block-image, > .wp-block-group__inner-container > .wp-block-image) { flex-direction: column; align-items: stretch; }
	.asp-article .wp-block-group:has(> .wp-block-image, > .wp-block-group__inner-container > .wp-block-image) :is(.wp-block-image, .wp-block-group) { width: 100%; flex: 0 0 auto; }
	.asp-article .wp-block-group > .wp-block-image { height: min(420px, 100vw); }
	/* scaled collage: the label stays readable above the small photo */
	[data-name="Photo label"] { z-index: 2; }
}

/* about-us / Our home map: below 1024px the copy flows on top and the map graphic (desktop: absolute, right-anchored
   in a 600x554 panel) scales from one unit, --gw = the graphic width; small labels keep their 10px size */
@media (max-width: 1023px) {
	[data-name="Atlantic coast map"] { container-type: inline-size; --gw: min(600px, 100cqi - 48px); height: auto; }
	/* the graphic's room: an in-flow spacer (the card has no padding on desktop) */
	[data-name="Atlantic coast map"]::after { content: ""; display: block; height: calc(var(--gw) * 0.92333 + 48px); }
	[data-name="Atlantic coast map"] > [data-name="Home copy"] { position: static; width: auto; max-width: none; margin: 40px 24px 0; }
	[data-name="Atlantic coast map"] > [data-name="Home copy"] > * { width: 100%; max-width: 100%; }
	[data-name="Atlantic coast map"] > [data-name="Map panel"] { left: auto; top: auto; right: calc(24px + var(--gw) * 0.00000); bottom: calc(24px + var(--gw) * 0.00000); width: calc(var(--gw) * 1.00000); height: calc(var(--gw) * 0.92333); }
	[data-name="Atlantic coast map"] > .contents > :nth-child(1) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.10333); bottom: calc(24px + var(--gw) * 0.23667); width: calc(var(--gw) * 0.71667); height: calc(var(--gw) * 0.55000); }
	[data-name="Atlantic coast map"] > .contents > :nth-child(2) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.46667); bottom: calc(24px + var(--gw) * 0.35000); width: calc(var(--gw) * 0.18333); height: calc(var(--gw) * 0.06000); }
	[data-name="Atlantic coast map"] > .contents > :nth-child(3) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.67500); bottom: calc(24px + var(--gw) * 0.36667); width: calc(var(--gw) * 0.03000); height: calc(var(--gw) * 0.03000); }
	[data-name="Atlantic coast map"] > .contents > :nth-child(4) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.18333); bottom: calc(24px + var(--gw) * 0.48167); width: calc(var(--gw) * 0.28333); height: calc(var(--gw) * 0.06000); }
	[data-name="Atlantic coast map"] > .contents > :nth-child(5) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.49167); bottom: calc(24px + var(--gw) * 0.49833); width: calc(var(--gw) * 0.03000); height: calc(var(--gw) * 0.03000); }
	[data-name="Atlantic coast map"] > .contents > :nth-child(6) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.30333); bottom: calc(24px + var(--gw) * 0.65000); width: calc(var(--gw) * 0.31667); height: calc(var(--gw) * 0.06000); }
	[data-name="Atlantic coast map"] > .contents > :nth-child(7) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.24333); bottom: calc(24px + var(--gw) * 0.66667); width: calc(var(--gw) * 0.03000); height: calc(var(--gw) * 0.03000); }
	[data-name="Atlantic coast map"] > p { translate: none; left: auto; top: auto; right: calc(24px + var(--gw) * 0.05500); bottom: calc(24px + var(--gw) * 0.84333); }
	[data-name="Atlantic coast map"] > [data-name="Location key"] { left: auto; top: auto; right: calc(24px + var(--gw) * 0.05667); bottom: calc(24px + var(--gw) * -0.00667); }
	[data-name="Atlantic coast map"] > .contents > *, [data-name="Atlantic coast map"] > [data-name="Location key"] { translate: none; }   /* offsets were measured after the translate */
	[data-name="Atlantic coast map"] > .contents > :is(:nth-child(2), :nth-child(4), :nth-child(6)) { font-size: calc(var(--gw) * 0.04792); line-height: 1.25; }
}

/* contact / Location map: same scheme as the about-us map (copy in flow, graphic scaled from --gw) */
@media (max-width: 1023px) {
	[data-name="Atlantic coastline map"] { container-type: inline-size; --gw: min(600px, 100cqi - 48px); height: auto; flex-direction: column; padding: 32px 24px 0; }
	[data-name="Atlantic coastline map"]::after { content: ""; display: block; flex: none; height: calc(var(--gw) * 0.92333 + 48px); }
	[data-name="Atlantic coastline map"] > [data-name="Location copy"] { width: 100%; max-width: none; }
	[data-name="Atlantic coastline map"] > [data-name="Location copy"] > * { width: 100%; max-width: 100%; }
	[data-name="Atlantic coastline map"] > .contents > *, [data-name="Atlantic coastline map"] > p, [data-name="Atlantic coastline map"] > [data-name="Location key"] { translate: none; }
	[data-name="Atlantic coastline map"] > [data-name="Map panel"] { left: auto; top: auto; right: calc(24px + var(--gw) * 0.00000); bottom: calc(24px + var(--gw) * 0.00000); width: calc(var(--gw) * 1.00000); height: calc(var(--gw) * 0.92333); }
	[data-name="Atlantic coastline map"] > .contents > :nth-child(1) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.10500); bottom: calc(24px + var(--gw) * 0.18500); width: calc(var(--gw) * 0.71667); height: calc(var(--gw) * 0.55000); }
	[data-name="Atlantic coastline map"] > .contents > :nth-child(2) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.46833); bottom: calc(24px + var(--gw) * 0.29833); width: calc(var(--gw) * 0.18333); height: calc(var(--gw) * 0.06000); }
	[data-name="Atlantic coastline map"] > .contents > :nth-child(3) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.67667); bottom: calc(24px + var(--gw) * 0.31500); width: calc(var(--gw) * 0.03000); height: calc(var(--gw) * 0.03000); }
	[data-name="Atlantic coastline map"] > .contents > :nth-child(4) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.18500); bottom: calc(24px + var(--gw) * 0.43000); width: calc(var(--gw) * 0.28333); height: calc(var(--gw) * 0.06000); }
	[data-name="Atlantic coastline map"] > .contents > :nth-child(5) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.49333); bottom: calc(24px + var(--gw) * 0.44667); width: calc(var(--gw) * 0.03000); height: calc(var(--gw) * 0.03000); }
	[data-name="Atlantic coastline map"] > .contents > :nth-child(6) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.30500); bottom: calc(24px + var(--gw) * 0.59833); width: calc(var(--gw) * 0.31667); height: calc(var(--gw) * 0.06000); }
	[data-name="Atlantic coastline map"] > .contents > :nth-child(7) { left: auto; top: auto; right: calc(24px + var(--gw) * 0.24500); bottom: calc(24px + var(--gw) * 0.61500); width: calc(var(--gw) * 0.03000); height: calc(var(--gw) * 0.03000); }
	[data-name="Atlantic coastline map"] > p { left: auto; top: auto; right: calc(24px + var(--gw) * 0.05500); bottom: calc(24px + var(--gw) * 0.84333); }
	[data-name="Atlantic coastline map"] > [data-name="Location key"] { left: auto; top: auto; right: calc(24px + var(--gw) * 0.05667); bottom: calc(24px + var(--gw) * -0.00667); }
	[data-name="Atlantic coastline map"] > .contents > :is(:nth-child(2), :nth-child(4), :nth-child(6)) { font-size: calc(var(--gw) * 0.04792); line-height: 1.25; }
}

/* drawer: skill reference implementation (references/drawer-menu.css) */
/* Mobile menu drawer (<=1100px): full viewport height, slides in from the LEFT on open and
   back out to the LEFT on close. Logo on top, links, then the header's other buttons.
   ========================================================================================== */
.site-drawer, .site-drawer-backdrop { display: none; }
@media (max-width: 1100px) {
  .site-header__nav, .site-header__nav.is-open, .site-header__nav.is-open + .site-header__book { display: none !important; }
  .site-header__book { display: none !important; }
  .site-menu-toggle { display: block; position: relative; z-index: 2; }
  .site-drawer { position: fixed; z-index: 10001; top: 0; bottom: 0; left: 0; display: flex; width: min(420px, 100vw); height: 100vh; height: 100dvh;
    flex-direction: column; padding: 24px 28px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    color: #fff; background: var(--site-black); box-shadow: 24px 0 60px rgba(0,0,0,.35);
    transform: translateX(-100%); visibility: hidden; transition: transform .38s cubic-bezier(.22,.8,.2,1), visibility 0s linear .38s; }
  .site-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform .38s cubic-bezier(.22,.8,.2,1), visibility 0s; }
  .site-drawer-backdrop { position: fixed; z-index: 10000; inset: 0; display: block; background: rgba(8,5,3,.55); opacity: 0; pointer-events: none; transition: opacity .38s ease; }
  .site-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
  html.site-drawer-open, html.site-drawer-open body { overflow: hidden; }
  .site-drawer__head { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .site-drawer__logo { display: flex; width: 176px; max-width: 60vw; align-items: center; }
  .site-drawer__logo a, .site-drawer__logo img { display: block; width: 100%; height: auto; }
  .site-drawer__close { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: transparent; cursor: pointer; }
  .site-drawer__close::before, .site-drawer__close::after { position: absolute; top: 50%; left: 50%; width: 18px; height: 1.5px; content: ""; background: currentColor; }
  .site-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .site-drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .site-drawer__nav { display: flex; flex-direction: column; padding: 16px 0; }
  .site-drawer__link { display: flex; min-height: 52px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; }
  .site-drawer__link[aria-current="page"], .site-drawer__link:hover { color: var(--site-gold); }
  .site-drawer__actions { display: flex; margin-top: auto; padding-top: 24px; flex-direction: column; gap: 12px; }
  .site-drawer__button { display: flex; min-height: 48px; align-items: center; justify-content: center; padding: 14px 24px; color: #fff; background: var(--site-gold); font-size: 13px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; }
}
@media (prefers-reduced-motion: reduce) { .site-drawer, .site-drawer-backdrop { transition: none !important; } }

/* drawer + burger: brand theme (the burger exists only below 1101px) */
@media (min-width: 1101px) { .site-menu-toggle { display: none; } }
@media (max-width: 1100px) {
	button.site-menu-toggle { display: inline-flex; }
	.site-menu-toggle { width: 48px; height: 48px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 0;
		border: 1.5px solid #03256c; border-radius: 999px; background: #fff; cursor: pointer; }
	.site-menu-toggle > span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #03256c; }
	.site-drawer { --site-black: #03256c; --site-gold: #06bee1; font-family: "Poppins:SemiBold"; }
	.site-drawer__link { font-family: "Poppins:SemiBold"; font-size: 14px; letter-spacing: 1px; }
	.site-drawer__link[aria-current="page"] { font-family: "Poppins:Bold"; }
	.site-drawer__button { border-radius: 999px; font-family: "Poppins:Bold"; color: #03256c; letter-spacing: 1px; }
	.site-drawer__logo { width: 72px; }
}

/* drawer logo: the clone loses the header's size classes, so its absolute image filled the whole drawer */
@media (max-width: 1100px) {
	.site-drawer .site-drawer__logo { position: relative; display: block; flex: none; width: 64px; height: 64px; max-width: none; }
	.site-drawer .site-drawer__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
}

/* surf-camp / A typical day: step numbers and titles scale down below desktop (desktop 78px / 34px) */
@media (max-width: 1100px) {
	[data-name="Day moment"] .text-\[78px\] { font-size: 48px; height: auto; }
	[data-name="Day moment"] .text-\[34px\] { font-size: 26px; }
}
@media (max-width: 600px) {
	[data-name="Day moment"] .text-\[78px\] { font-size: 40px; }
	[data-name="Day moment"] .text-\[34px\] { font-size: 21px; }
	[data-name="Day moment"] { min-height: 0; }
}