/* Plug-in solar experience: sun, flight, island. */
.x-page .site-header { position: fixed; inset: 0 0 auto; background: linear-gradient(rgba(2,7,11,.92), rgba(2,7,11,.6) 70%, rgba(2,7,11,0)); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.x-page .site-header.is-scrolled { background: rgba(2, 7, 11, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.x-page.x-on-sun { cursor: crosshair; }

.x-stage { position: relative; background: #02070b; }
.x-sticky { position: relative; padding: 8rem 0 4rem; background: radial-gradient(circle at 70% 30%, rgba(255,140,20,.55), rgba(255,80,0,.15) 25%, transparent 45%), #02070b; }
.x-ready .x-stage { height: 760svh; background: #02070b; }
@media (max-width: 760px) { .x-ready .x-stage { height: 560svh; } }
.x-ready .x-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 0; background: none; }
/* The canvas used to end in a straight horizontal cut across the whole screen, obvious wherever the
   scene was still lit. This fades the last slice of the frame into the page behind it. Nothing else
   bridged the join once the old dawn band was removed. */
.x-ready .x-sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh;
	background: linear-gradient(to bottom, rgba(2,7,11,0) 0%, rgba(2,7,11,.55) 55%, #02070b 100%);
	pointer-events: none; z-index: 2; }
.x-reduce .x-sticky::after, .no-webgl .x-sticky::after { display: none; }
.x-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: none; }
.x-ready .x-canvas { display: block; }
.x-progress, .x-hint { display: none; }
.x-ready .x-progress { display: block; }
.x-ready .x-hint { display: flex; }

/* Story beats that fade over the 3D scene */
.x-beat { position: relative; margin: 0 var(--gutter) 3rem; max-width: 44rem; }
.x-ready .x-beat { position: absolute; margin: 0; left: var(--gutter); right: var(--gutter); bottom: clamp(4rem, 14vh, 9rem); opacity: 0; transform: translateY(30px); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); pointer-events: none; }
.x-ready .x-beat.is-on { opacity: 1; transform: none; filter: none; transition-delay: 0s; }
.x-ready .x-beat.is-on a { pointer-events: auto; }
.x-ready .x-beat--right { left: auto; text-align: right; }
.x-beat--intro { bottom: clamp(3rem, 10vh, 7rem); max-width: 40rem; }
.x-h { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; color: #fff; margin: 0 0 1.2rem; text-shadow: 0 2px 40px rgba(0,0,0,.6); }
.x-h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.05; letter-spacing: -0.03em; color: #fff; margin: 0 0 .8rem; text-shadow: 0 2px 40px rgba(0,0,0,.7); }
.x-h2 em { color: var(--sun); }
.x-big { font-family: var(--mono); white-space: nowrap; font-size: clamp(2rem, 6vw, 5.4rem); letter-spacing: -0.05em; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.8); margin: 0; line-height: 1; }
.x-big small { font-size: .45em; color: var(--sun); letter-spacing: 0; }
.x-ready .x-beat--top { top: 20vh; bottom: auto; }
.x-sub { font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: rgba(255,255,255,.85); margin: 1rem 0 0; }
.x-note { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sun); border: 1px solid rgba(255,184,28,.4); border-radius: 999px; padding: .5rem .9rem; margin: .4rem 0 0; }
.x-note::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px var(--sun); animation: pulse 1.6s infinite; }
.x-src { font-size: .9rem; color: rgba(255,255,255,.75); margin: 1rem 0 0; }
.x-src a { color: var(--sun); }
.x-skip { display: inline-flex; align-items: center; transition: opacity .4s; position: absolute; left: var(--gutter); bottom: 1.2rem; z-index: 5; font-family: var(--mono); font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(2,7,11,.8); border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; padding: .75rem 1rem; min-height: 44px; text-decoration: none; }
.x-skip:hover { border-color: var(--sun); color: var(--sun); }
.x-pause { position: absolute; right: var(--gutter); bottom: 1.2rem; z-index: 5; transition: opacity .4s; }
.is-ending .x-progress, .is-ending .x-odo { opacity: 0 !important; pointer-events: none; visibility: hidden; }
.is-landed .x-skip, .is-landed .x-pause { opacity: 0 !important; pointer-events: none; visibility: hidden; }
.x-sticky:not(:has(.x-canvas)) .x-pause { display: none; }
.x-note { }
.x-hint.is-gone { opacity: 0; }
.x-hint { transition: opacity .6s; position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0; margin: 0; font-family: var(--mono); font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); display: flex; flex-direction: column; align-items: center; gap: .3rem; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
/* The chevron bobs gently, so the cue reads as "scroll" and not just as a label. */
.x-hint__ch { width: 18px; height: 18px; animation: x-bob 1.9s var(--ease) infinite; }
@keyframes x-bob { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(5px); opacity: 1; } }
.x-reduce .x-hint__ch, .motion-off .x-hint__ch { animation: none; }
.x-progress { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; width: 2px; height: 30vh; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.x-progress span { position: absolute; inset: 0; background: linear-gradient(var(--sun), var(--ember)); transform-origin: top; transform: scaleY(0); }
.x-fade { position: absolute; inset: 0; background: var(--night); opacity: 0; pointer-events: none; }

/* The island scene follows straight on from the flight */
.x-island .hero__planet { left: 50%; top: 50%; width: max(140vh, 120vw); border-radius: 0; box-shadow: none; }
.x-island .hero__stars { display: none; }
.x-island .hero__vignette { background: linear-gradient(90deg, rgba(6,18,26,.9) 0%, rgba(6,18,26,.55) 40%, rgba(6,18,26,.05) 70%), linear-gradient(to top, var(--night) 0%, rgba(6,18,26,0) 35%); }

/* What's new */
.x-new { background: var(--night); color: #fff; padding-block: clamp(5rem, 12vw, 9rem); }
.x-new .display-2 { color: #fff; } .x-new .display-2 em { color: var(--sun); }
.x-timeline { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,.08); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .x-timeline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .x-timeline { grid-template-columns: repeat(3, 1fr); } }
.x-timeline li { background: var(--night); padding: 2rem 1.7rem 2.2rem; position: relative; transition: background .5s var(--ease); }
.x-timeline li:hover { background: #0A1C27; }
.x-timeline li::before { content: ""; position: absolute; left: 1.7rem; top: 0; width: 2.4rem; height: 3px; background: var(--sun); transform-origin: left; transform: scaleX(var(--bar, 1)); }
.x-when { font-family: var(--mono); font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sun); margin: 0 0 1.4rem; }
.x-timeline h3 { color: #fff; font-size: 1.6rem; margin: 0 0 .7rem; }
.x-timeline p:last-child { color: rgba(255,255,255,.72); margin: 0; }
.x-new .source { margin-top: 1.6rem; }

/* How it works */
.x-how { background: var(--deep); color: #fff; padding-block: clamp(5rem, 12vw, 9rem); }
.x-how__grid { display: grid; gap: clamp(2rem, 6vw, 6rem); }
@media (min-width: 900px) { .x-how__grid { grid-template-columns: 1.1fr 1fr; } .x-how__diagram { position: sticky; top: 14vh; align-self: start; } }
.x-how .display-2 { color: #fff; } .x-how .display-2 em { color: var(--sun); }
.x-how__steps { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.x-how__steps li { padding: 1.4rem 0 1.4rem 1.4rem; border-left: 2px solid rgba(255,255,255,.12); transition: border-color .4s; min-height: 22vh; }
.x-how__steps li.is-active { border-left-color: var(--sun); }
.x-how__steps li.is-active h3 { color: var(--sun); }
.x-how__steps h3 { color: #fff; font-size: 1.45rem; margin: 0 0 .4rem; }
.x-how__steps p { color: rgba(255,255,255,.75); margin: 0; }
.x-flow { width: 100%; max-width: 30rem; display: block; margin-inline: auto; overflow: visible; }
.x-flow text { fill: rgba(255,255,255,.75); font-family: var(--mono); font-size: 13px; text-anchor: middle; letter-spacing: .06em; }
.x-node rect, .x-node circle { fill: #0E2A3A; stroke: rgba(255,255,255,.25); stroke-width: 1.5; transition: stroke .4s, fill .4s; }
.x-node .x-grid { fill: none; stroke: rgba(255,255,255,.15); }
.x-node.is-on rect { stroke: var(--sun); fill: #173A4D; }
.x-node.is-on text { fill: #fff; }
.x-wire { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 3; stroke-linecap: round; }
.x-wire.is-on { stroke: var(--sun); stroke-dasharray: 6 10; animation: flow 1s linear infinite; filter: drop-shadow(0 0 6px rgba(255,184,28,.7)); }
.x-wire--out.is-on { stroke: #7FB8D4; filter: none; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.x-flow__sun { animation: sunpulse 3s ease-in-out infinite; transform-origin: 80px 70px; }
@keyframes sunpulse { 50% { transform: scale(1.08); } }

.x-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.5rem; }
.btn--dark { background: var(--night); color: #fff; }
.btn--dark:hover { background: var(--deep); color: #fff; }


.x-note--touch { display: none; }
@media (hover: none) { .x-note--mouse { display: none; } .x-note--touch { display: inline; } }
@media (max-width: 760px) { .x-ready .x-beat--intro { bottom: 5.5rem; } .x-ready .x-beat--right { text-align: left; left: var(--gutter); } .x-ready .x-beat { bottom: 5.5rem; } }

.x-reduce .x-note, .no-webgl .x-note, .motion-off .x-note { display: none; }

/* Journey readout: distance to Earth and sunlight's travel time, counting with the scroll */
.x-odo { display: none; }
.x-ready .x-odo { display: block; position: absolute; left: var(--gutter); top: 5.5rem; font-family: var(--mono); font-size: .85rem; letter-spacing: .06em; color: rgba(255,255,255,.8); opacity: 0; transition: opacity .6s var(--ease); font-variant-numeric: tabular-nums; }
.x-ready .x-odo.is-on { opacity: 1; }
.x-odo p { margin: 0 0 .3rem; } .x-odo span { color: var(--sun); }
/* Phones: keep the How it works diagram in view while the steps scroll */
@media (max-width: 899px) { .x-how__diagram { order: -1; position: sticky; top: 4.2rem; z-index: 2; background: var(--deep); padding-bottom: .5rem; } .x-flow { max-width: 15rem; } }

/* The landing: the island sits in the same sticky frame, under the canvas, so there is never a seam */
.x-island-layer { display: none; }
.x-ready .x-island-layer { display: block; position: absolute; inset: 0; overflow: hidden; background: #06121A; }
.x-island-layer img { position: absolute; left: 50%; top: 50%; width: max(140vh, 120vw); height: auto; translate: -50% -50%; will-change: transform; }
.x-island-light { position: absolute; inset: -150%; background: linear-gradient(105deg, rgba(6,18,26,.9) 0%, rgba(6,18,26,.86) 40%, rgba(6,18,26,.62) 45.5%, rgba(255,184,28,0) 48.5%, rgba(255,200,90,.26) 50.5%, rgba(255,184,28,0) 53%); will-change: transform; }
.x-island-layer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,18,26,.88) 0%, rgba(6,18,26,.5) 42%, rgba(6,18,26,0) 72%), linear-gradient(to top, rgba(6,18,26,.9) 0%, rgba(6,18,26,0) 30%); }
.x-land-title { font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .98; letter-spacing: -0.045em; color: #fff; margin: 0 0 1.4rem; }
.x-land-title em { color: var(--sun); }
.x-land-lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgba(255,255,255,.85); max-width: 36rem; margin: 0 0 2rem; }
.x-ready .x-beat--land { max-width: 60rem; bottom: clamp(3rem, 12vh, 7rem); }
.x-ready .x-beat--land.is-on .btn { pointer-events: auto; }

/* Layout QA fixes (v4) */
/* 2. Story text shares the header's left edge */
.x-ready .x-beat, .x-ready .x-odo, .x-skip { left: max(var(--gutter), calc((100vw - 80rem) / 2)); }
.x-ready .x-beat { right: max(var(--gutter), calc((100vw - 80rem) / 2)); }
/* 6. Right-aligned beat clears the progress track */
.x-ready .x-beat--right { right: calc(max(var(--gutter), calc((100vw - 80rem) / 2)) + 2.5rem); }
/* 17. Intro headline: four lines, not five; kicker with a hanging dot */
.x-h { max-width: 21ch; font-size: clamp(2rem, 3.6vw, 3.2rem); }
.x-beat .kicker { display: flex; gap: .45rem; align-items: baseline; }
.x-beat .kicker .dot { flex: none; margin: 0; align-self: center; }
/* Readability over bright parts of the scene */
.x-ready .x-beat::before { content: ""; position: absolute; inset: -2.5rem -2rem; background: radial-gradient(closest-side, rgba(2,7,11,.62), transparent); z-index: -1; pointer-events: none; }
/* 4. Phones: story text clears the Skip button */
@media (max-width: 760px) { .x-ready .x-beat, .x-ready .x-beat--intro { bottom: 6.75rem; } }
/* 11. How it works: readable diagram, heading first on phones, calmer spacing */
.x-how__steps li { min-height: 16vh; padding-block: 1.6rem; }
@media (max-width: 899px) { .x-flow { max-width: 19rem; } .x-flow text { font-size: 17px; } }
.x-how__grid { margin-top: 2rem; }
.x-ready .x-beat { isolation: isolate; }
/* 12. Six things: cells visible, grid framed */
.x-timeline { border: 1px solid rgba(255,255,255,.08); }
.x-timeline li { background: #0A1C27; }
.x-timeline li:hover { background: #0E2331; }
.x-ready .x-beat--right { left: auto; }
@media (max-width: 760px) { .x-ready .x-beat--right { left: var(--gutter); right: var(--gutter); } }
.x-pause { right: max(var(--gutter), calc((100vw - 80rem) / 2)); }
/* No WordPress block gap above the home flight: it showed as a pale strip and pushed the flight 20px down */
main.x-main, main.front-main { margin-top: 0 !important; }
.x-h { max-width: 24ch; }
.x-ready .x-beat--intro { max-width: 46rem; }
.x-h { max-width: 25ch; }
/* Opening text sits middle-left on larger screens (phones keep it low, under the sun) */
@media (min-width: 761px) { .x-ready .x-beat--intro { top: 50%; bottom: auto; translate: 0 -50%; } }
.x-pause { background: rgba(2,7,11,.85); }
/* Landing headline: each line balances on its own, and the gold line fits on one line on laptops */
.x-land-title { max-width: none; font-size: clamp(2.3rem, 5vw, 4.4rem); }
.x-land-title > span, .x-land-title > em { display: block; text-wrap: balance; }
.x-ready .x-beat--land { max-width: 64rem; }
.x-land-lede { text-wrap: balance; }

/* Phones: the frame follows the real visible screen as the address bar shrinks, so no pale strip or squashing. */
.x-ready .x-sticky { height: 100svh; height: 100dvh; }
body.x-page { background: #02070b; }
/* "Scroll to fly" sits above the two buttons on narrow screens instead of behind them. */
@media (max-width: 760px) { .x-hint { bottom: 5rem; flex-direction: row; align-items: center; gap: .45rem; font-size: .7rem; } .x-hint__ch { width: 15px; height: 15px; } @keyframes x-bob { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(3px); opacity: 1; } } }
/* Two-line label: keep the gold dot level with the first line. */
.x-beat .kicker .dot { align-self: flex-start; margin-top: .45em; }
/* The menu shading must not repeat into its transparent bottom border (it showed as a dark 1px line over the sun). */
.x-page .site-header { background-origin: border-box; background-repeat: no-repeat; }

/* Landing island, v2 (25 Sept 2026): the whole island in view.
   The island fills about 18-76% across and 12-80% down the photo, centred near 47% / 46%.
   The photo's edges fade into a matching ocean colour, so it can sit smaller than the screen. */
.x-ready .x-island-layer { background: #131525; --isz: min(118vh, 118svh, 95vw); --icx: 68vw; --icy: 50%; }
.x-island-layer img {
	width: var(--isz); height: var(--isz); translate: none;
	left: calc(var(--icx) - .47 * var(--isz)); top: calc(var(--icy) - .46 * var(--isz));
	transform-origin: 47% 46%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 9%, #000 88%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 9%, #000 88%, transparent);
	mask-composite: intersect;
}
/* Phones: the island sits in the top part of the screen, above the headline, with the text fading in over its southern tip. */
@media (max-width: 760px) {
	.x-ready .x-island-layer { --isz: min(112vw, 58svh); --icx: 50vw; --icy: 36%; }
	.x-island-layer::after { background: linear-gradient(to top, rgba(6,18,26,.96) 0%, rgba(6,18,26,.88) 40%, rgba(6,18,26,.35) 58%, rgba(6,18,26,0) 72%); }
}
@media (min-width: 761px) {
	.x-ready .x-island-layer { --icx: 70vw; }
	.x-island-layer::after { background: linear-gradient(90deg, rgba(6,18,26,.9) 0%, rgba(6,18,26,.55) 34%, rgba(6,18,26,.12) 50%, rgba(6,18,26,0) 62%), linear-gradient(to top, rgba(6,18,26,.85) 0%, rgba(6,18,26,0) 22%); }
}
/* Phones: a compact landing so the island has the top of the screen to itself. */
@media (max-width: 760px) {
	.x-ready .x-beat--land { bottom: 1.6rem; }
	.x-beat--land .kicker { display: none; }
	.x-land-title { font-size: clamp(1.85rem, 8.4vw, 2.3rem); margin-bottom: .9rem; }
	.x-land-lede { font-size: 1rem; line-height: 1.5; margin-bottom: 1.2rem; }
	.x-beat--land .hero__ctas { display: flex; flex-wrap: nowrap; gap: .5rem; }
	.x-beat--land .hero__ctas .btn { flex: 1 1 auto; justify-content: center; padding: .8rem .9rem; font-size: .92rem; min-height: 44px; white-space: nowrap; }
	.x-ready .x-island-layer { --isz: min(118vw, 62svh); --icy: 34%; }
	.x-island-layer::after { background: linear-gradient(to top, rgba(6,18,26,.96) 0%, rgba(6,18,26,.9) 34%, rgba(6,18,26,.3) 50%, rgba(6,18,26,0) 62%); }
}
@media (max-width: 760px) { .x-island-light { opacity: .4; } }
@media (min-width: 761px) and (max-width: 1099px) and (orientation: portrait) { .x-ready .x-island-layer { --icy: 41%; } }

/* The cloud descent (v3): the island is drawn inside the 3D scene. The overlay layer now only carries the
   shading behind the headline, above the canvas; its image stays invisible and just marks where the island lands. */
.x-ready:not(.no-webgl) .x-island-layer { z-index: 1; background: transparent; pointer-events: none; }
.x-ready:not(.no-webgl) .x-island-layer img { opacity: 0; }
.x-ready .x-beat { z-index: 2; }

/* Still version (device set to reduce motion, or no 3D): a tidy stack aligned to the page edge, clear of the menu. */
.x-reduce .x-sticky, .no-webgl .x-sticky { padding: 9rem max(var(--gutter), calc((100vw - 80rem) / 2)) 5rem; }
.x-reduce .x-beat, .no-webgl .x-beat { position: static; max-width: 46rem; margin: 0 0 3.5rem; }
.x-reduce .x-beat--land, .no-webgl .x-beat--land { max-width: 64rem; margin-bottom: 0; }
/* Under reduced motion, or without WebGL, there is no flight: hide the flight controls and
   the scroll cue too. The Pause animation link in the footer still satisfies WCAG 2.2.2,
   and leaving the flight Pause button here meant pressing it just reloaded the page. */
.x-reduce .x-skip, .no-webgl .x-skip,
.x-reduce .x-pause, .no-webgl .x-pause,
.x-reduce .x-hint, .no-webgl .x-hint { display: none; }

/* First screen: the plain answer and a way in */
.x-intro-note { margin: 1.4rem 0 0; font-size: clamp(1rem, 1.3vw, 1.15rem); color: rgba(255,255,255,.88); max-width: 34rem; text-wrap: pretty; }
.x-intro-note a { display: inline-block; margin-left: .35rem; color: var(--sun); font-weight: 600; text-underline-offset: 3px; }
.x-intro-note a::after { content: " \2192"; }
.x-ready .x-beat--intro.is-on .x-intro-note a { pointer-events: auto; }
#landing:focus { outline: none; }

/* Contrast over the sun (accessibility re-check SF3) */
.x-ready .x-beat--intro .x-h { max-width: 18ch; }
.x-beat .kicker, .x-sub { color: #fff; }
.x-ready .x-beat--intro, .x-ready .x-beat--top { text-shadow: 0 1px 18px rgba(2,7,11,.85), 0 0 2px rgba(2,7,11,.6); }
#landing:focus, #landing:focus-visible { outline: none !important; box-shadow: none !important; }
/* The flight's pause button matches "Skip the intro" (same size and type); gold when paused */
.x-sticky .x-pause { font-family: var(--mono); font-size: .88rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(2,7,11,.8); border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; padding: .75rem 1rem; min-height: 48px; bottom: 1.2rem; box-sizing: border-box; }
.x-sticky .x-skip { min-height: 48px; box-sizing: border-box; }
.x-sticky .x-pause:hover { border-color: var(--sun); color: var(--sun); }
.x-sticky .x-pause[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: var(--night); }
/* On phones the cue sits just above the two flight buttons, not behind them. */
@media (max-width: 760px) { .x-intro-note a { display: block; margin: .5rem 0 0; width: fit-content; } }
/* Right-hand beat: flush with the page's right edge (the same line as the menu and the Pause button), balanced lines */
@media (min-width: 761px) {
	.x-ready .x-beat--right { right: max(var(--gutter), calc((100vw - 80rem) / 2)); max-width: min(56rem, 62vw); }
	.x-beat--right .x-h2 { text-wrap: balance; }
}
@media (min-width: 761px) { .x-beat--right .x-h2 { max-width: none; margin-left: auto; } }
/* No light sweep over the island */
.x-island-light { display: none !important; }

/* Every island guide (home page, 16 Oct 2026) */
.x-guides { background: var(--night); color: #fff; padding-block: clamp(4rem, 10vw, 7rem); }
.x-guides .display-2 { color: #fff; }
.x-guides .display-2 em { color: var(--sun); }
.x-guides__lede { font-size: 1.15rem; color: rgba(255,255,255,.78); max-width: 40rem; margin: 1rem 0 0; text-wrap: balance; }
.x-guides__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.x-guides__col { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 1.5rem 1.6rem; background: rgba(255,255,255,.03); }
.x-guides__col h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 1rem; color: var(--sun); }
.x-guides__col ul { list-style: none; margin: 0; padding: 0; }
.x-guides__col li + li { margin-top: .7rem; }
.x-guides__col a { color: rgba(255,255,255,.9); text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 1px; }
.x-guides__col a:hover, .x-guides__col a:focus-visible { color: var(--sun); border-bottom-color: var(--sun); }