/* ==========================================================================
   Why Furnas — page styles (prefix: fz-)
   ========================================================================== */

/* ---------- Hero: steam drifting over the fumaroles ---------- */
.fz-hero h1 { max-width: 11ch; }
.fz-hero .page-hero__media::after { background:
  linear-gradient(to top, rgba(13, 12, 10, 0.94) 0%, rgba(13, 12, 10, 0.6) 40%, rgba(13, 12, 10, 0.32) 70%, rgba(13, 12, 10, 0.5) 100%),
  linear-gradient(to right, rgba(13, 12, 10, 0.55) 0%, rgba(13, 12, 10, 0.2) 50%, rgba(13, 12, 10, 0) 78%); }
.fz-hero .eyebrow { text-shadow: 0 1px 14px rgba(13, 12, 10, 0.8); }
.fz-hero::after {
  content: ''; position: absolute; inset: -30% -45% 35%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(26% 30% at 66% 52%, rgba(235, 228, 214, 0.16), transparent 70%),
    radial-gradient(22% 24% at 80% 36%, rgba(235, 228, 214, 0.12), transparent 70%),
    radial-gradient(20% 26% at 52% 30%, rgba(235, 228, 214, 0.08), transparent 70%);
  filter: blur(34px);
  animation: fzMist 42s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .fz-hero::after { animation: none; } }
@keyframes fzMist { from { transform: translate3d(-7%, 4%, 0); } to { transform: translate3d(8%, -5%, 0); } }

/* ---------- Why here ---------- */
.fz-why__grid { display: grid; gap: clamp(48px, 7vw, 96px); }
@media (min-width: 1024px) { .fz-why__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; column-gap: clamp(60px, 8vw, 140px); } }
.fz-why__head { display: grid; gap: clamp(22px, 3vw, 34px); justify-items: start; }
.fz-why__head h2 { max-width: 11ch; }
.fz-why__list { border-top: 1px solid var(--line); }
.fz-why__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px 14px; padding: clamp(24px, 3vw, 34px) 0 clamp(28px, 3.4vw, 38px); border-bottom: 1px solid var(--line); }
.fz-why__n { grid-row: span 2; font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 1.6rem; line-height: 1.1; color: var(--accent-text); }
.fz-why__t { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-s); line-height: 1.15; }
.fz-why__list p { color: var(--muted); font-size: 1.05rem; max-width: 34rem; }
/* Tiago, in reported speech (the brief does not record these as his verbatim words) */
.fz-why__said { margin: clamp(80px, 11vw, 170px) auto 0; max-width: 1040px; text-align: center; display: grid; justify-items: center; gap: clamp(18px, 2.2vw, 26px); }
.fz-why__who { font-family: var(--f-ui); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); text-wrap: balance; }
.fz-why__who::before { content: ''; display: block; width: 28px; height: 1px; margin: 0 auto 16px; background: currentColor; opacity: 0.7; }
.fz-why__who span { white-space: nowrap; }
.fz-why__pre { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 1.08rem + 0.7vw, 1.75rem); line-height: 1.3; color: var(--muted); max-width: 46ch; text-wrap: balance; }
.fz-why__line { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-l); line-height: 1.06; letter-spacing: -0.01em; max-width: 16ch; text-wrap: balance; }
.fz-why__line em { font-style: italic; color: var(--accent-text); }

/* ---------- The place that made the problem: the steam veil ---------- */
.fz-thesis { position: relative; overflow: hidden; isolation: isolate; padding-bottom: var(--section); }
.fz-veil { --p: 0; position: relative; isolation: isolate; display: grid; align-items: center; padding-block: clamp(110px, 16vw, 230px) clamp(80px, 12vw, 170px); }
@media (min-width: 1024px) { .fz-veil { min-height: min(100svh, 980px); } }
.fz-veil__steam { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translate3d(0, calc(var(--p) * -16%), 0); }
.fz-veil__steam i {
  position: absolute; left: var(--x); bottom: var(--b, -30%); width: var(--w, 20vw); height: var(--h, 110%); border-radius: 50%; transform-origin: 50% 100%;
  background: radial-gradient(50% 50% at 50% 62%, rgba(235, 228, 214, 0.3), rgba(235, 228, 214, 0.1) 52%, transparent 74%);
  filter: blur(30px);
  opacity: calc(var(--o, 0.9) * (1.3 - var(--p) * 1.45));
  animation: fzRise var(--t, 22s) ease-in-out infinite; animation-delay: var(--dl, 0s);
}
.fz-veil__steam i:nth-child(1) { --x: 0%; --w: 24vw; --h: 112%; --t: 26s; --r: -9deg; --b: -26%; }
.fz-veil__steam i:nth-child(2) { --x: 19%; --w: 13vw; --h: 78%; --t: 19s; --dl: -6s; --o: 0.65; --r: 6deg; --b: -38%; }
.fz-veil__steam i:nth-child(3) { --x: 36%; --w: 26vw; --h: 128%; --t: 24s; --dl: -12s; --r: -3deg; --b: -34%; }
.fz-veil__steam i:nth-child(4) { --x: 59%; --w: 15vw; --h: 88%; --t: 21s; --dl: -3s; --o: 0.7; --r: 11deg; --b: -22%; }
.fz-veil__steam i:nth-child(5) { --x: 70%; --w: 24vw; --h: 116%; --t: 28s; --dl: -15s; --r: 5deg; --b: -30%; }
.fz-veil__steam i:nth-child(6) { --x: 89%; --w: 13vw; --h: 76%; --t: 18s; --dl: -9s; --o: 0.55; --r: -7deg; --b: -40%; }
@media (max-width: 767px) { .fz-veil__steam i { --w: 46vw !important; filter: blur(20px); } .fz-veil__steam i:nth-child(n) { --x: calc(var(--i) * 18% - 14%); } }
.fz-veil__steam i:nth-child(1) { --i: 0; } .fz-veil__steam i:nth-child(2) { --i: 1; } .fz-veil__steam i:nth-child(3) { --i: 2; }
.fz-veil__steam i:nth-child(4) { --i: 3; } .fz-veil__steam i:nth-child(5) { --i: 4; } .fz-veil__steam i:nth-child(6) { --i: 5; }
@keyframes fzRise {
  0%, 100% { transform: translate3d(0, 8%, 0) rotate(var(--r, 0deg)) scale(0.9, 0.94); }
  50% { transform: translate3d(5%, -10%, 0) rotate(calc(var(--r, 0deg) * -0.6)) scale(1.08, 1.12); }
}
.fz-veil__inner { display: grid; justify-items: center; text-align: center; gap: clamp(24px, 3.2vw, 40px); }
.fz-veil__pre { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2rem); line-height: 1.3; color: var(--muted); max-width: 30ch; text-wrap: balance; }
.fz-veil__pre span { color: var(--fg); }
.fz-veil__line { max-width: 12ch; }
/* Clarity arrives with distance: the statement resolves out of the steam as you scroll,
   coming sharp just as it reaches the middle of the screen (measured: --p ≈ 0.56 there at
   1440×900 and 390×844; ~6–8px of blur as it enters at the fold). */
.js .fz-veil__line { filter: blur(calc(max(0, 0.56 - var(--p)) * 26px)); opacity: calc(0.15 + var(--p) * 1.7); }
@media (prefers-reduced-motion: reduce) {
  .js .fz-veil__line { filter: none; opacity: 1; }
  .fz-veil__steam { transform: none; }
  .fz-veil__steam i { animation: none; opacity: calc(var(--o, 0.9) * 0.7); transform: rotate(var(--r, 0deg)); }
}

/* Research under the veil */
.fz-research { display: grid; gap: clamp(48px, 6vw, 80px); }
.fz-research__lead { display: grid; gap: clamp(18px, 2vw, 26px); align-content: start; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.fz-research__v { font-family: var(--f-display); font-weight: 300; font-size: clamp(6.2rem, 3rem + 13vw, 14rem); line-height: 0.8; letter-spacing: -0.035em; color: var(--fg); margin-block: 6px 4px; font-variant-numeric: lining-nums; }
.fz-research__v small { font-size: 0.36em; font-style: italic; letter-spacing: 0; color: var(--accent-text); margin-left: 0.08em; vertical-align: 0.95em; }
.fz-research__claim { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-m); line-height: 1.12; max-width: 22ch; text-wrap: balance; }
.fz-research__notes { display: grid; align-content: start; border-top: 1px solid var(--line); }
.fz-note { display: grid; gap: 14px; padding: clamp(28px, 3.4vw, 40px) 0; border-bottom: 1px solid var(--line); align-content: start; }
.fz-note__k { font-family: var(--f-ui); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); }
.fz-note__t { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.5rem); line-height: 1.1; text-wrap: balance; }
.fz-note__t em { font-style: italic; color: var(--accent-text); }
.fz-note__b { color: var(--muted); max-width: 32rem; }
.fz-research__close { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem); line-height: 1.3; max-width: 34ch; color: var(--fg); text-wrap: balance; }
.fz-research__more { margin-top: -24px; }
@media (min-width: 640px) and (max-width: 1023px) {
  .fz-research__lead { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 6vw, 56px); align-items: end; }
  .fz-research__lead > .stat__lever { grid-column: 1 / -1; }
  .fz-research__v { grid-row: 2 / span 2; align-self: end; margin-bottom: 0; }
  .fz-research__claim, .fz-research__lead > .stat__src { grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fz-research__notes { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}
@media (min-width: 1024px) {
  .fz-research { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(60px, 8vw, 140px); row-gap: clamp(56px, 6vw, 88px); }
  .fz-research__notes { padding-top: 0; }
  .fz-research__close, .fz-research__more { grid-column: 1 / -1; }
  .fz-research__close { justify-self: center; text-align: center; }
  .fz-research__more { justify-self: center; }
}

/* ---------- The five places: editorial sequence ---------- */
.fz-places__list { display: grid; gap: clamp(96px, 13vw, 210px); }
.fz-place { display: grid; gap: clamp(28px, 4vw, 52px); scroll-margin-top: calc(var(--header-h) + 24px); }
.fz-place__fig { margin: 0; min-width: 0; }
.fz-place__media { aspect-ratio: 3 / 2; }
.fz-place__media--portrait { aspect-ratio: 4 / 5; }
.fz-place--wide .fz-place__media { aspect-ratio: 4 / 3; }
#stay .fz-place__fig { max-width: 863px; } /* never wider than the source image */
/* The water: a 16:10 window on the top of the frame keeps the bather in the source out of
   shot at every width (see placeMeta.water). Do not make this taller than 1.54:1. */
#water .fz-place__media { aspect-ratio: 16 / 10; }
.fz-place__text { display: grid; gap: 18px; align-content: start; justify-items: start; min-width: 0; }
.fz-place__n { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.fz-place__num { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(3.8rem, 2.6rem + 4vw, 7rem); line-height: 0.78; letter-spacing: -0.02em; color: var(--accent-text); }
.fz-place__of { font-family: var(--f-ui); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--muted); }
.fz-place__title { font-size: var(--fs-l); line-height: 1; max-width: 12ch; }
.fz-place__body { color: var(--muted); max-width: 31rem; font-size: clamp(1.09rem, 1rem + 0.3vw, 1.25rem); }

@media (min-width: 640px) and (max-width: 1023px) {
  .fz-place__text { grid-template-columns: 84px minmax(0, 1fr); column-gap: clamp(20px, 4vw, 40px); row-gap: 16px; }
  .fz-place__text > * { grid-column: 2; }
  .fz-place__text > .fz-place__n { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; gap: 18px; }
  .fz-place--right .fz-place__fig { width: 74%; margin-left: auto; }
  .fz-place--wide .fz-place__media { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .fz-place { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2vw, 32px); align-items: center; }
  .fz-place--left .fz-place__fig { grid-column: 1 / 8; }
  .fz-place--left .fz-place__text { grid-column: 9 / 13; }
  .fz-place--right .fz-place__fig { grid-column: 7 / 12; grid-row: 1; }
  .fz-place--right .fz-place__text { grid-column: 2 / 6; grid-row: 1; }
  #water .fz-place__fig { grid-column: 6 / 13; }
  #water .fz-place__text { grid-column: 1 / 5; }
  .fz-place--wide { row-gap: clamp(36px, 4vw, 56px); }
  .fz-place--wide .fz-place__fig { grid-column: 1 / -1; }
  .fz-place--wide .fz-place__media { aspect-ratio: 21 / 9; }
  .fz-place--wide .fz-place__text { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 8vw, 140px); align-items: end; }
  .fz-place--wide .fz-place__text > * { grid-column: 1; }
  .fz-place--wide .fz-place__text > .fz-place__body { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  .fz-place--wide .fz-place__title { max-width: none; }
}

@media (max-width: 639px) {
  .fz-place .media__cap span + span { display: none; }
}

/* Six hours in the ground — a slow clock that fills as you read */
.fz-clock { --p: 0; display: flex; align-items: center; gap: 20px; margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--line); width: 100%; max-width: 31rem; }
.fz-clock svg { width: 76px; height: 76px; flex: none; transform: rotate(-90deg); overflow: visible; }
.fz-clock__track { fill: none; stroke: var(--line); stroke-width: 1; }
/* Circumference of r=54 is 339.29; explicit lengths avoid pathLength on <circle> and unitless calc(). */
.fz-clock__arc { fill: none; stroke: var(--accent-text); stroke-width: 1.6; stroke-dasharray: 339.3px 339.3px; stroke-dashoffset: calc((1 - min(1, var(--p) * 2)) * 339.3px); }
.fz-clock__tick { fill: var(--accent-text); }
.fz-clock__v { display: grid; gap: 6px; }
.fz-clock__v span { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 2.1rem; line-height: 1; color: var(--fg); }
.fz-clock__v small { font-family: var(--f-ui); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.no-js .fz-clock__arc { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .fz-clock__arc { stroke-dashoffset: 0; } }

/* ---------- The wider island ---------- */
.fz-island__hero { margin: 0; }
.fz-island__heromedia { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .fz-island__heromedia { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .fz-island__heromedia { aspect-ratio: 2.25 / 1; } }
.fz-island__notes { display: grid; margin-top: clamp(48px, 6vw, 84px); border-top: 1px solid var(--line); }
.fz-isle { display: grid; gap: 14px; align-content: start; padding: 28px 0 36px; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) {
  .fz-island__notes { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 110px); border-top: 0; }
  .fz-isle { border-top: 1px solid var(--line); border-bottom: 0; padding-bottom: 0; }
}
.fz-isle__n { font-family: var(--f-ui); font-size: 0.68rem; letter-spacing: 0.22em; color: var(--accent-text); }
.fz-isle__t { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-m); line-height: 1.04; }
.fz-isle__b { color: var(--muted); max-width: 34rem; }
.fz-isle__sci { margin-top: 6px; padding-left: 18px; border-left: 1px solid var(--accent); color: var(--fg); font-size: 1rem; max-width: 32rem; }
.fz-isle__sci span { display: block; margin-top: 8px; font-size: 0.88rem; font-style: italic; color: var(--muted); }
.fz-isle__sci a, .fz-island .stat__src a { color: inherit; }

.fz-falls { display: grid; gap: 36px; margin-top: clamp(80px, 11vw, 160px); align-items: center; }
.fz-falls__fig { margin: 0; width: 76%; max-width: 300px; }
.fz-falls__media { aspect-ratio: 9 / 16; }
.fz-falls__media img { transform: scale(1.07); } /* hides the source's baked-in rounded corners; still below native width */
.fz-falls__text { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.fz-falls__line { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2.05rem); line-height: 1.22; color: var(--fg); max-width: 22ch; text-wrap: balance; }
.fz-falls__line em { color: var(--accent-text); }
@media (min-width: 768px) {
  .fz-falls { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: clamp(40px, 7vw, 120px); }
  .fz-falls__fig { width: 100%; }
}
@media (min-width: 1024px) {
  .fz-falls { grid-template-columns: 320px minmax(0, 1fr); padding-left: 8.333%; }
  .fz-falls__fig { max-width: 320px; }
}
.fz-island__hero .media__cap { flex-wrap: wrap; }
@media (max-width: 639px) { .fz-island__hero .media__cap, .fz-map .media__cap { flex-direction: column; gap: 6px; } }
.fz-island__foot { margin-top: clamp(64px, 8vw, 110px); padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); }

/* ---------- Getting here ---------- */
.fz-arrive__grid { display: grid; gap: clamp(48px, 6vw, 72px); margin-bottom: clamp(72px, 9vw, 130px); }
@media (min-width: 1024px) { .fz-arrive__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: center; column-gap: clamp(48px, 6vw, 100px); } }
.fz-coords { display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: start; }
.fz-coords__v { display: grid; font-family: var(--f-display); font-weight: 300; font-size: clamp(4.2rem, 18vw, 8.6rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
@media (min-width: 768px) { .fz-coords__v { font-size: clamp(5rem, 14.5vw, 8.6rem); } }
@media (min-width: 1024px) { .fz-coords__v { font-size: clamp(5.6rem, 1.4rem + 7.4vw, 8.4rem); } }
.fz-coords__line i { font-style: italic; color: var(--accent-text); margin-left: 0.06em; }
.fz-coords__line + .fz-coords__line { padding-left: 0.5em; }
.fz-coords__note { font-style: italic; color: var(--muted); font-size: 1.08rem; }

.fz-map { margin: 0; min-width: 0; }
.fz-map__frame { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border: 1px solid var(--line); background: rgba(27, 25, 20, 0.025); background: color-mix(in srgb, var(--fg) 2.5%, transparent); }
@media (min-width: 640px) { .fz-map__frame { aspect-ratio: 859 / 507; } }
/* Label sizes are in map units, so they scale with the frame. Each step below keeps the
   rendered size between ~11px and ~15px for the frame width in that range. */
.fz-map__svg { display: block; width: 100%; height: 100%; font-family: var(--f-ui); font-size: 24px; }
@media (min-width: 440px) { .fz-map__svg { font-size: 20px; } }
@media (min-width: 540px) { .fz-map__svg { font-size: 17px; } }
@media (min-width: 640px) { .fz-map__svg { font-size: 18px; } }
@media (min-width: 768px) { .fz-map__svg { font-size: 15px; } }
@media (min-width: 900px) { .fz-map__svg { font-size: 13px; } }
@media (min-width: 1024px) { .fz-map__svg { font-size: 20px; } }
@media (min-width: 1150px) { .fz-map__svg { font-size: 18px; } }
@media (min-width: 1280px) { .fz-map__svg { font-size: 15.5px; } }
.fz-map__group { display: none; }
.fz-map__cap-narrow { display: none; }
@media (max-width: 639px) {
  .fz-map__minor { display: none; } .fz-map__group { display: inline; }
  .fz-map__cap-wide { display: none; } .fz-map__cap-narrow { display: inline; }
}
.fz-map__svg .fz-map__sea { font-family: var(--f-display); font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0.04em; font-size: 1.75em; fill: var(--muted); opacity: 0.8; }
.fz-map__svg text { fill: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; }
.fz-map__grat line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fz-map__gratl text { font-size: 0.95em; opacity: 0.85; letter-spacing: 0.1em; }
.fz-map__isles ellipse { fill: rgba(27, 25, 20, 0.42); fill: color-mix(in srgb, var(--fg) 42%, transparent); }
.fz-map__sm { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fz-map__smname { fill: var(--fg) !important; }
.fz-map__pdl circle { fill: var(--bg); stroke: var(--fg); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.fz-map__pdl text { fill: var(--fg); }
.fz-map__dot { fill: var(--fg); }
.fz-map__pulse { fill: none; stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: fzPulse 3s var(--ease) infinite; }
@keyframes fzPulse { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(4.2); opacity: 0; } }
.fz-map__furnas line { stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fz-map__furnas text { fill: var(--fg); font-family: var(--f-display); font-style: italic; text-transform: none; letter-spacing: 0.01em; font-size: 1.9em; }
.fz-map__lisbon line, .fz-map__lisbon path { stroke: var(--muted); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.fz-map__scale line { stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fz-map__scale text { fill: var(--fg); font-size: 0.95em; }
@media (prefers-reduced-motion: reduce) { .fz-map__pulse { animation: none; transform: scale(2); opacity: 0.45; } }

/* São Miguel in detail (phones only) */
.fz-detail { display: none; }
@media (max-width: 639px) {
  .fz-detail { display: block; position: relative; margin-top: 10px; border: 1px solid var(--line); background: rgba(27, 25, 20, 0.025); background: color-mix(in srgb, var(--fg) 2.5%, transparent); }
}
.fz-detail__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fz-detail__isle { fill: rgba(201, 168, 76, 0.45); fill: color-mix(in srgb, var(--gold) 45%, transparent); stroke: var(--gold-deep); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fz-detail__route { fill: none; stroke: var(--fg); stroke-width: 1.25; stroke-dasharray: 2 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fz-detail__pdl { fill: var(--bg); stroke: var(--fg); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.fz-detail__ring { fill: none; stroke: var(--fg); stroke-width: 1; opacity: 0.55; vector-effect: non-scaling-stroke; }
.fz-detail__dot { fill: var(--fg); }
.fz-detail__scale line { stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fz-detail__l { position: absolute; font-family: var(--f-ui); font-size: 0.68rem; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--fg); pointer-events: none; }
.fz-detail__l--title { top: 8%; right: 3.5%; color: var(--muted); }
.fz-detail__l--furnas { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1; letter-spacing: 0.01em; text-transform: none; transform: translate(-50%, calc(-100% - 12px)); }
.fz-detail__l--pdl { text-align: center; transform: translate(-50%, 9px); }
.fz-detail__l--route { transform: translate(-60%, calc(-100% - 11px)); }
.fz-detail__l--scale { color: var(--muted); transform: translate(calc(-100% - 8px), -50%); }

/* The closing band reuses the hero's fumaroles, framed higher — the steam above the valley. */
.cta-band__media img { object-position: 50% 24%; }

@media (min-width: 768px) and (max-width: 1023px) {
  .fz-arrive__steps { grid-template-columns: 1fr 1fr; column-gap: 44px; }
}