/* Regional guides: three editorial routes sharing primitives, not a cloned card page. */
.area-page { --area-ink: #11100f; --area-paper: #f3eee5; --area-soft: #e2d6c6; --area-accent: #c8793d; --area-image: #241d19; color: var(--area-ink); background: var(--area-paper); font-family: var(--sans); line-height: 1.78; }
.area-page--harbor { --area-ink: #e8f3f7; --area-paper: #071824; --area-soft: #113246; --area-accent: #5cc9d5; --area-image: #031018; }
.area-page--city { --area-ink: #fff8f4; --area-paper: #241016; --area-soft: #402028; --area-accent: #e7a5ba; --area-image: #16070b; }
.area-page *, .area-page *::before, .area-page *::after { box-sizing: border-box; }
.area-page a { color: inherit; }
.area-wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.area-header { position: relative; z-index: 2; border-bottom: 1px solid color-mix(in srgb, var(--area-ink) 16%, transparent); background: color-mix(in srgb, var(--area-paper) 90%, transparent); }
.area-nav { min-height: 78px; display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.area-brand { display: inline-block; font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -.045em; text-decoration: none; }
.area-brand small { display: block; color: var(--area-accent); font-family: var(--sans); font-size: 9px; font-weight: 900; letter-spacing: .23em; }
.area-nav nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); font-size: 12px; font-weight: 800; }
.area-nav nav a { position: relative; text-decoration: none; white-space: nowrap; }
.area-nav nav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; content: ""; transform: scaleX(0); transform-origin: left; background: var(--area-accent); transition: transform .2s ease; }
.area-nav nav a:hover::after, .area-nav nav a:focus-visible::after { transform: scaleX(1); }
.area-hero { position: relative; overflow: clip; }
.area-hero::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 87% 28%, color-mix(in srgb, var(--area-accent) 28%, transparent), transparent 23rem); }
.area-hero-grid { display: grid; min-height: 670px; grid-template-columns: minmax(0, .96fr) minmax(390px, .94fr); align-items: center; gap: clamp(36px, 8vw, 118px); padding-block: 78px 90px; }
.area-hero-copy { position: relative; z-index: 1; }
.area-kicker { display: flex; gap: 12px; align-items: center; margin: 0; color: var(--area-accent); font-size: 10px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.area-kicker::before { width: 28px; height: 1px; content: ""; background: currentColor; }
.area-kicker span { margin-left: auto; color: color-mix(in srgb, var(--area-ink) 42%, transparent); font-size: 12px; letter-spacing: .1em; }
.area-hero h1 { max-width: 720px; margin: 22px 0 28px; font-family: var(--serif); font-size: clamp(47px, 5.7vw, 84px); font-weight: 500; line-height: 1.14; letter-spacing: -.075em; text-wrap: balance; word-break: keep-all; }
.area-lead { max-width: 605px; margin: 0; font-size: clamp(16px, 1.55vw, 19px); line-height: 1.9; word-break: keep-all; }
.area-hero-link { display: inline-flex; gap: 18px; align-items: center; margin-top: 38px; padding-bottom: 10px; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 900; text-decoration: none; }
.area-hero-link b { color: var(--area-accent); font-size: 16px; }
.area-hero-media { position: relative; min-height: 430px; margin: 0; overflow: hidden; background: var(--area-image); }
.area-hero-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(135deg, color-mix(in srgb, var(--area-paper) 55%, transparent), transparent 54%), linear-gradient(0deg, color-mix(in srgb, var(--area-image) 45%, transparent), transparent 45%); pointer-events: none; }
.area-hero-media img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; filter: saturate(.72) contrast(1.04); }
.area-hero-media figcaption { position: absolute; z-index: 1; right: 22px; bottom: 20px; left: 22px; max-width: 310px; margin-left: auto; padding: 13px 15px; background: color-mix(in srgb, var(--area-image) 83%, transparent); color: #fff; font-size: 12px; line-height: 1.65; }
.area-hosts { padding-block: 116px 120px; overflow: hidden; background: color-mix(in srgb, var(--area-soft) 32%, var(--area-paper)); }
.area-hosts-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: clamp(32px, 8vw, 126px); align-items: end; margin-bottom: 58px; }
.area-hosts-intro span { display: block; color: var(--area-accent); font-size: 10px; font-weight: 900; letter-spacing: .22em; }
.area-hosts-intro h2 { max-width: 640px; margin: 14px 0 0; font-family: var(--serif); font-size: clamp(36px, 4.6vw, 64px); font-weight: 500; line-height: 1.17; letter-spacing: -.065em; text-wrap: balance; word-break: keep-all; }
.area-hosts-intro p { max-width: 440px; margin: 0; font-size: 15px; line-height: 1.9; word-break: keep-all; }
.area-host-marquee { display: grid; gap: 14px; width: 100%; }
.area-host-track { display: flex; width: max-content; margin: 0; will-change: transform; animation: area-host-flow 34s linear infinite; }
.area-host-track--reverse { animation-direction: reverse; animation-duration: 39s; }
.area-host-card { width: clamp(156px, 14vw, 218px); height: clamp(210px, 19vw, 292px); flex: 0 0 auto; margin: 0 12px 0 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--area-ink) 13%, transparent); background: var(--area-image); pointer-events: none; user-select: none; }
.area-host-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: saturate(.88) contrast(1.04); }
.area-page--island .area-host-card:nth-child(odd) { clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); }
.area-page--harbor .area-hosts { background: linear-gradient(120deg, #0a2534, var(--area-paper) 60%); }
.area-page--harbor .area-host-card { border-radius: 110px 110px 10px 10px; }
.area-page--city .area-hosts { background: linear-gradient(135deg, #32131f, var(--area-paper) 60%); }
.area-page--city .area-host-card { border-color: color-mix(in srgb, var(--area-accent) 38%, transparent); border-radius: 4px 34px 4px 4px; }
@keyframes area-host-flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.area-opening { display: grid; grid-template-columns: .72fr 1.7fr; gap: clamp(36px, 9vw, 136px); padding-block: 132px; }
.area-section-label { padding-top: 8px; border-top: 1px solid currentColor; }
.area-section-label span, .area-section-intro > span, .area-jungpm span { display: block; color: var(--area-accent); font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.area-section-label b { display: block; margin-top: 12px; font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.25; }
.area-prose { font-family: var(--serif); font-size: clamp(21px, 2.15vw, 30px); letter-spacing: -.04em; }
.area-prose p { margin: 0 0 30px; word-break: keep-all; }
.area-prose p:last-child { margin-bottom: 0; }
.area-steps { padding-block: 118px; color: #f9f6f0; background: var(--area-image); }
.area-section-intro { display: grid; grid-template-columns: .9fr 1.35fr; gap: 40px; align-items: end; }
.area-section-intro h2 { max-width: 760px; margin: 12px 0 0; font-family: var(--serif); font-size: clamp(36px, 4.6vw, 64px); font-weight: 500; line-height: 1.17; letter-spacing: -.065em; text-wrap: balance; word-break: keep-all; }
.area-steps ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 74px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.27); }
.area-steps li { min-height: 255px; padding: 25px 25px 18px 0; border-right: 1px solid rgba(255,255,255,.27); }
.area-steps li:not(:first-child) { padding-left: 25px; }
.area-steps li:last-child { border-right: 0; }
.area-steps li > span { display: block; color: var(--area-accent); font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.area-steps h3 { margin: 52px 0 12px; font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.25; letter-spacing: -.04em; }
.area-steps p { margin: 0; color: rgba(255,255,255,.76); font-size: 14px; word-break: keep-all; }
.area-notes { padding-block: 132px; }
.area-note-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; margin-top: 68px; }
.area-note-list article { position: relative; padding: 30px 0 0; border-top: 1px solid currentColor; }
.area-note-list article::before { position: absolute; top: -1px; left: 0; width: 74px; height: 3px; content: ""; background: var(--area-accent); }
.area-note-list h3 { margin: 0 0 18px; font-family: var(--serif); font-size: 29px; font-weight: 500; letter-spacing: -.05em; line-height: 1.3; word-break: keep-all; }
.area-note-list p { margin: 0; font-size: 15px; word-break: keep-all; }
.area-gallery { padding-block: 124px; overflow: clip; color: #f9f6f0; background: var(--area-image); }
.area-gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 100px; gap: 12px; margin-top: 64px; }
.area-gallery-item { min-height: 0; margin: 0; overflow: hidden; background: #181311; }
.area-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.area-gallery-item:hover img { transform: scale(1.035); }
.area-gallery-item--1 { grid-column: span 7; grid-row: span 4; }
.area-gallery-item--2 { grid-column: span 5; grid-row: span 2; }
.area-gallery-item--3 { grid-column: span 5; grid-row: span 2; }
.area-gallery-item--4 { grid-column: span 4; grid-row: span 3; }
.area-gallery-item--5 { grid-column: span 4; grid-row: span 3; }
.area-gallery-item--6 { grid-column: span 4; grid-row: span 3; }
.area-gallery-item--7 { grid-column: span 5; grid-row: span 3; }
.area-gallery-item--8 { grid-column: span 4; grid-row: span 3; }
.area-gallery-item--9 { grid-column: span 3; grid-row: span 3; }
.area-page--harbor .area-gallery-grid { grid-auto-rows: 104px; }
.area-page--harbor .area-gallery-item--1 { grid-column: 5 / span 8; grid-row: span 4; }
.area-page--harbor .area-gallery-item--2 { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.area-page--harbor .area-gallery-item--3 { grid-column: 1 / span 4; grid-row: 3 / span 2; }
.area-page--harbor .area-gallery-item--4, .area-page--harbor .area-gallery-item--5, .area-page--harbor .area-gallery-item--6 { grid-column: span 4; grid-row: span 3; }
.area-page--harbor .area-gallery-item--7 { grid-column: span 3; grid-row: span 3; }
.area-page--harbor .area-gallery-item--8 { grid-column: span 5; grid-row: span 3; }
.area-page--harbor .area-gallery-item--9 { grid-column: span 4; grid-row: span 3; }
.area-page--city .area-gallery { background: linear-gradient(160deg, var(--area-image), #2c111a); }
.area-page--city .area-gallery-grid { grid-auto-rows: 106px; }
.area-page--city .area-gallery-item { border: 1px solid rgba(231,165,186,.13); }
.area-page--city .area-gallery-item--1 { grid-column: span 8; grid-row: span 4; }
.area-page--city .area-gallery-item--2 { grid-column: span 4; grid-row: span 4; }
.area-page--city .area-gallery-item--3 { grid-column: span 3; grid-row: span 3; }
.area-page--city .area-gallery-item--4 { grid-column: span 3; grid-row: span 3; }
.area-page--city .area-gallery-item--5 { grid-column: span 6; grid-row: span 3; }
.area-page--city .area-gallery-item--6 { grid-column: span 6; grid-row: span 3; }
.area-page--city .area-gallery-item--7 { grid-column: span 3; grid-row: span 3; }
.area-page--city .area-gallery-item--8 { grid-column: span 3; grid-row: span 3; }
.area-page--city .area-gallery-item--9 { grid-column: span 5; grid-row: span 3; }
.area-extra { padding-block: 116px; background: color-mix(in srgb, var(--area-soft) 42%, var(--area-paper)); }
.area-extra-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(42px, 8vw, 114px); margin-top: 58px; }
.area-extra-copy article { padding: 29px 0; border-top: 1px solid color-mix(in srgb, var(--area-ink) 42%, transparent); }
.area-extra-copy h3 { margin: 0 0 13px; font-family: var(--serif); font-size: 27px; font-weight: 500; letter-spacing: -.045em; line-height: 1.3; word-break: keep-all; }
.area-extra-copy p { margin: 0; font-size: 15px; word-break: keep-all; }
.area-faq { display: grid; grid-template-columns: .88fr 1.5fr; gap: clamp(40px, 8vw, 125px); padding-block: 38px 132px; }
.area-faq .area-section-intro { display: block; }
.area-faq-list { border-top: 1px solid currentColor; }
.area-faq-list details { border-bottom: 1px solid color-mix(in srgb, var(--area-ink) 38%, transparent); }
.area-faq-list summary { display: flex; gap: 22px; align-items: center; justify-content: space-between; padding: 22px 0; cursor: pointer; font-size: 17px; font-weight: 800; list-style: none; word-break: keep-all; }
.area-faq-list summary::-webkit-details-marker { display: none; }
.area-faq-list summary b { color: var(--area-accent); font-size: 26px; font-weight: 400; transition: transform .2s ease; }
.area-faq-list details[open] summary b { transform: rotate(45deg); }
.area-faq-list p { max-width: 760px; margin: 0; padding: 0 38px 25px 0; color: color-mix(in srgb, var(--area-ink) 75%, transparent); font-size: 15px; word-break: keep-all; }
.area-closing { padding-block: 100px; color: #f9f6f0; background: linear-gradient(120deg, var(--area-image), color-mix(in srgb, var(--area-image) 65%, var(--area-accent))); }
.area-closing .area-wrap { display: grid; grid-template-columns: 1.35fr .65fr; gap: 70px; align-items: end; }
.area-closing p { max-width: 830px; margin: 0; font-family: var(--serif); font-size: clamp(26px, 3.1vw, 44px); line-height: 1.45; letter-spacing: -.055em; word-break: keep-all; }
.area-jungpm { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.35); }
.area-jungpm a { display: flex; gap: 14px; align-items: center; margin-top: 14px; font-size: 15px; font-weight: 900; text-decoration: none; }
.area-jungpm a b { color: var(--area-accent); font-size: 19px; }
.area-cross { display: grid; grid-template-columns: .55fr 1fr 1fr; gap: 1px; padding-block: 0; background: color-mix(in srgb, var(--area-ink) 28%, transparent); }
.area-cross p, .area-cross a { min-height: 164px; margin: 0; padding: 30px; background: var(--area-paper); }
.area-cross p { display: flex; align-items: flex-end; color: var(--area-accent); font-size: 12px; font-weight: 900; letter-spacing: .13em; }
.area-cross a { display: flex; flex-direction: column; justify-content: space-between; font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.32; letter-spacing: -.045em; text-decoration: none; transition: background .2s ease, color .2s ease; }
.area-cross a:hover { background: var(--area-image); color: #fff; }
.area-cross a span { color: var(--area-accent); font-family: var(--sans); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.area-cross a b { color: var(--area-accent); align-self: flex-end; font-family: var(--sans); }
.area-footer { padding-block: 62px 90px; background: var(--area-paper); }
.area-footer p { max-width: 680px; margin: 22px 0 0; color: color-mix(in srgb, var(--area-ink) 72%, transparent); font-size: 12px; word-break: keep-all; }
.area-page--island .area-hero-grid { grid-template-columns: minmax(0, 1.03fr) minmax(360px, .87fr); }
.area-page--island .area-hero-media { clip-path: polygon(11% 0, 100% 0, 100% 89%, 0 100%, 0 10%); }
.area-page--harbor .area-hero { background: linear-gradient(180deg, rgba(92,201,213,.08), transparent 60%); }
.area-page--harbor .area-hero-media { border-radius: 220px 220px 0 0; }
.area-page--harbor .area-hero-media img { filter: saturate(.65) hue-rotate(8deg); }
.area-page--city .area-hero { background: linear-gradient(90deg, rgba(231,165,186,.06), transparent 48%); }
.area-page--city .area-hero-media { border: 1px solid color-mix(in srgb, var(--area-accent) 48%, transparent); box-shadow: 22px 24px 0 color-mix(in srgb, var(--area-soft) 85%, transparent); }
.area-page--city .area-hero-media img { filter: saturate(.58) contrast(1.1) brightness(.86); }
@media (max-width: 860px) { .area-wrap { width: min(100% - 32px, 690px); } .area-nav { min-height: 68px; } .area-nav nav { gap: 14px; font-size: 11px; } .area-nav nav a:nth-child(3) { display: none; } .area-hero-grid, .area-page--island .area-hero-grid { grid-template-columns: 1fr; gap: 42px; min-height: auto; padding-block: 62px 68px; } .area-hero-media, .area-hero-media img { min-height: 340px; } .area-opening, .area-faq { grid-template-columns: 1fr; gap: 42px; padding-block: 86px; } .area-section-intro { grid-template-columns: 1fr; gap: 10px; } .area-steps { padding-block: 82px; } .area-steps ol { grid-template-columns: 1fr 1fr; margin-top: 50px; } .area-steps li:nth-child(2) { border-right: 0; } .area-steps li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.27); } .area-steps li:nth-child(3) { padding-left: 0; } .area-note-list { gap: 28px; margin-top: 48px; } .area-gallery { padding-block: 82px; } .area-gallery-grid { grid-auto-rows: 78px; gap: 9px; margin-top: 42px; } .area-extra { padding-block: 82px; } .area-extra-copy { margin-top: 42px; } .area-faq { padding-top: 0; } .area-closing .area-wrap { grid-template-columns: 1fr; gap: 34px; } .area-cross { grid-template-columns: 1fr 1fr; } .area-cross p { grid-column: 1 / -1; min-height: 72px; padding: 20px; } }
@media (max-width: 580px) { .area-wrap { width: min(100% - 28px, 480px); } .area-brand { font-size: 19px; } .area-nav nav a:nth-child(1), .area-nav nav a:nth-child(2) { display: none; } .area-nav nav { margin-left: auto; } .area-hero h1 { font-size: clamp(40px, 12vw, 57px); line-height: 1.16; } .area-lead { font-size: 15px; } .area-hero-media, .area-hero-media img { min-height: 284px; } .area-hero-media figcaption { right: 13px; bottom: 13px; left: 13px; max-width: none; font-size: 11px; } .area-opening { padding-block: 68px; } .area-prose { font-size: 20px; } .area-steps ol, .area-note-list, .area-extra-copy { grid-template-columns: 1fr; } .area-gallery-grid, .area-page--harbor .area-gallery-grid, .area-page--city .area-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 128px; } .area-gallery-item, .area-gallery-item--1, .area-gallery-item--2, .area-gallery-item--3, .area-gallery-item--4, .area-gallery-item--5, .area-gallery-item--6, .area-gallery-item--7, .area-gallery-item--8, .area-gallery-item--9, .area-page--harbor .area-gallery-item--1, .area-page--harbor .area-gallery-item--2, .area-page--harbor .area-gallery-item--3, .area-page--harbor .area-gallery-item--4, .area-page--harbor .area-gallery-item--5, .area-page--harbor .area-gallery-item--6, .area-page--harbor .area-gallery-item--7, .area-page--harbor .area-gallery-item--8, .area-page--harbor .area-gallery-item--9, .area-page--city .area-gallery-item--1, .area-page--city .area-gallery-item--2, .area-page--city .area-gallery-item--3, .area-page--city .area-gallery-item--4, .area-page--city .area-gallery-item--5, .area-page--city .area-gallery-item--6, .area-page--city .area-gallery-item--7, .area-page--city .area-gallery-item--8, .area-page--city .area-gallery-item--9 { grid-column: auto; grid-row: span 1; } .area-gallery-item--1, .area-page--harbor .area-gallery-item--1, .area-page--city .area-gallery-item--1 { grid-column: 1 / -1; grid-row: span 2; } .area-steps li, .area-steps li:not(:first-child) { min-height: auto; padding: 22px 0; border-right: 0; border-top: 1px solid rgba(255,255,255,.27); } .area-steps li:first-child { border-top: 0; } .area-steps h3 { margin-top: 26px; } .area-note-list { margin-top: 36px; } .area-note-list h3, .area-extra-copy h3 { font-size: 25px; } .area-faq-list summary { padding-block: 19px; font-size: 15px; } .area-closing { padding-block: 70px; } .area-closing p { font-size: 25px; } .area-cross { grid-template-columns: 1fr; } .area-cross a { min-height: 135px; font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .area-page *, .area-page *::after { scroll-behavior: auto !important; transition: none !important; } }
@media (max-width: 860px) { .area-hosts { padding-block: 82px; } .area-hosts-intro { grid-template-columns: 1fr; gap: 16px; margin-bottom: 42px; } }
@media (max-width: 580px) { .area-hosts { padding-block: 66px; } .area-hosts-intro h2 { font-size: clamp(32px, 10vw, 44px); } .area-hosts-intro p { font-size: 14px; } .area-host-marquee { gap: 10px; } .area-host-card { width: 126px; height: 174px; margin-right: 10px; } }
@media (prefers-reduced-motion: reduce) { .area-host-track { animation: none; } }