/* Plan L3 cluster pages - huashu-design pass */
body.plan-l3-page { background: var(--cream); color: var(--ink); }
body.plan-l3-page.theme-itinerary { --tan: #d4a574; --teal: #18384c; --teal-deep: #102633; --teal-mid: #315d74; }
body.plan-l3-page.theme-duration { --tan: #c1b08c; --teal: #27323a; --teal-deep: #151b20; --teal-mid: #46535d; }
body.plan-l3-page.theme-budget { --tan: #e07a3c; --teal: #202426; --teal-deep: #101315; --teal-mid: #44402f; }
body.plan-l3-page.theme-first { --tan: #c7a86b; --teal: #173f39; --teal-deep: #102824; --teal-mid: #2f635a; }
.cluster-hero { position: relative; min-height: 820px; padding: 178px 0 76px; color: #fff; overflow: hidden; isolation: isolate; }
.cluster-hero .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; filter: saturate(.9) contrast(1.04); animation: kenburns 28s ease-in-out infinite alternate; }
.cluster-hero .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,38,51,.64), rgba(16,38,51,.22) 34%, rgba(16,38,51,.9)), linear-gradient(90deg, rgba(16,38,51,.72), rgba(16,38,51,.08) 70%); }
.theme-duration .cluster-hero .hero-scrim { background: linear-gradient(180deg, rgba(12,16,20,.7), rgba(12,16,20,.2) 35%, rgba(12,16,20,.92)), linear-gradient(90deg, rgba(12,16,20,.7), rgba(12,16,20,.05)); }
.theme-budget .cluster-hero .hero-scrim { background: linear-gradient(180deg, rgba(14,17,18,.72), rgba(14,17,18,.18) 32%, rgba(14,17,18,.94)), linear-gradient(90deg, rgba(14,17,18,.72), rgba(14,17,18,.05)); }
.theme-first .cluster-hero .hero-scrim { background: linear-gradient(180deg, rgba(14,40,36,.72), rgba(14,40,36,.2) 36%, rgba(14,40,36,.92)), linear-gradient(90deg, rgba(14,40,36,.7), rgba(14,40,36,.05)); }
.cluster-hero::before { content: attr(data-mark); position: absolute; right: 52px; top: 132px; font-family: var(--serif); font-style: italic; font-size: clamp(190px, 25vw, 430px); line-height: .82; color: rgba(255,255,255,.055); z-index: 0; pointer-events: none; }
.cluster-crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; display: flex; gap: 12px; flex-wrap: wrap; color: rgba(255,255,255,.76); margin-bottom: 52px; }
.cluster-crumbs a { color: rgba(255,255,255,.78); }
.cluster-crumbs a:hover, .cluster-crumbs .here { color: var(--tan); }
.cluster-mast { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.75fr); gap: 72px; align-items: end; position: relative; z-index: 1; }
.cluster-tag { display: inline-flex; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--tan); padding: 7px 14px; border: 1px solid var(--tan); border-radius: 999px; text-transform: uppercase; margin-bottom: 28px; }
.cluster-mast h1 { font-family: var(--serif); font-size: clamp(84px, 12vw, 184px); font-weight: 400; line-height: .9; letter-spacing: -.035em; color: #fff; max-width: 900px; }
.cluster-mast h1 em { display: block; color: var(--tan); font-style: italic; font-size: .43em; margin-top: 16px; letter-spacing: 0; }
.cluster-mast .lede { margin-top: 28px; max-width: 610px; font-size: 17px; line-height: 1.67; color: rgba(255,255,255,.88); }
.cluster-mast .lede em { color: var(--tan); font-style: italic; }
.cluster-card { background: rgba(16,38,51,.56); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.18); border-radius: 4px; padding: 8px 24px; }
.cluster-card .row { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--mono); font-size: 10px; letter-spacing: .17em; color: rgba(255,255,255,.7); text-transform: uppercase; }
.cluster-card .row:last-child { border-bottom: 0; }
.cluster-card .v { font-family: var(--serif); font-size: 23px; color: #fff; letter-spacing: 0; text-transform: none; }
.cluster-toc { margin-top: 54px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.2); display: flex; gap: 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.cluster-toc::-webkit-scrollbar { display: none; }
.cluster-toc a, .cluster-toc .lbl { flex-shrink: 0; }
.cluster-toc .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--tan); text-transform: uppercase; }
.cluster-toc a { font-family: var(--serif); font-style: italic; color: #fff; font-size: 16px; }
.cluster-toc a:hover { color: var(--tan); }
.hero-coord, .hero-credit { position: absolute; bottom: 26px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: rgba(255,255,255,.74); text-transform: uppercase; }
.hero-coord { left: 48px; } .hero-credit { right: 48px; }
.cluster-section { padding: 108px 0; }
.cluster-section.dark { background: var(--teal-deep); color: var(--cream); }
.section-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: end; gap: 28px; margin-bottom: 48px; }
.section-heading .num { font-family: var(--serif); font-style: italic; font-size: 86px; line-height: .8; color: var(--tan); }
.section-heading h2 { font-family: var(--serif); font-size: clamp(42px, 6vw, 76px); font-weight: 400; line-height: .96; letter-spacing: -.02em; color: var(--teal); }
.dark .section-heading h2 { color: var(--cream); }
.section-heading h2 em { color: var(--tan); font-style: italic; }
.section-heading p { margin-top: 14px; max-width: 620px; color: var(--ink-mute); line-height: 1.65; font-size: 15px; }
.dark .section-heading p { color: rgba(241,235,224,.72); }
.section-heading .right { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--tan); text-transform: uppercase; text-align: right; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card { min-height: 360px; position: relative; overflow: hidden; border-radius: 4px; background: var(--teal-deep); color: #fff; display: flex; align-items: flex-end; }
.feature-card.wide { grid-column: span 2; }
.feature-card .img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(.9); transform: scale(1.01); transition: transform .45s ease; }
.feature-card:hover .img { transform: scale(1.05); }
.feature-card .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.72)); }
.feature-card .body { position: relative; z-index: 1; padding: 24px; }
.feature-card .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--tan); text-transform: uppercase; margin-bottom: 12px; display: block; }
.feature-card h3 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: -.015em; }
.feature-card h3 em { color: var(--tan); font-style: italic; }
.feature-card p { margin-top: 14px; color: rgba(255,255,255,.82); line-height: 1.55; font-size: 14px; }
.feature-card .meta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: rgba(255,255,255,.72); text-transform: uppercase; }
.field-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 58px; align-items: start; }
.pull { font-family: var(--serif); font-size: clamp(28px, 3vw, 44px); line-height: 1.1; color: var(--cream); font-style: italic; border-left: 1px solid var(--tan); padding-left: 28px; }
.field-copy p { color: rgba(241,235,224,.78); line-height: 1.72; margin-bottom: 18px; font-size: 15px; }
.scenario-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.scenario { border: 1px solid var(--line); background: color-mix(in srgb, var(--cream) 86%, white); padding: 24px; border-radius: 4px; min-height: 230px; display: flex; flex-direction: column; }
.scenario .ref { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--tan); text-transform: uppercase; }
.scenario h3 { margin-top: 18px; font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.05; color: var(--teal); }
.scenario p { margin-top: 14px; color: var(--ink-mute); line-height: 1.6; font-size: 14px; }
.scenario a { margin-top: auto; padding-top: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--tan); text-transform: uppercase; }
.matrix { border-top: 1px solid var(--line); }
.matrix-row { display: grid; grid-template-columns: 1fr .7fr 1.3fr .8fr; gap: 18px; padding: 19px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.matrix-row.head { font-family: var(--mono); font-size: 10px; letter-spacing: .17em; color: var(--tan); text-transform: uppercase; }
.matrix-row strong { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--teal); }
.tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tip { background: rgba(255,255,255,.05); border: 1px solid rgba(241,235,224,.12); padding: 24px; border-radius: 4px; }
.tip .k { font-family: var(--mono); font-size: 10px; letter-spacing: .17em; color: var(--tan); text-transform: uppercase; }
.tip h3 { margin-top: 14px; font-family: var(--serif); font-size: 30px; font-weight: 400; color: var(--cream); line-height: 1.06; }
.tip p { margin-top: 12px; color: rgba(241,235,224,.72); line-height: 1.62; font-size: 14px; }
.reading-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.read-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; border: 1px solid var(--line); padding: 18px 20px; border-radius: 4px; background: color-mix(in srgb, var(--cream) 88%, white); }
.read-row .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--tan); text-transform: uppercase; }
.read-row h3 { margin-top: 6px; font-family: var(--serif); font-size: 25px; font-weight: 400; color: var(--teal); line-height: 1.08; }
.read-row span:last-child { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--ink-mute); text-transform: uppercase; }
.faq-list { max-width: 980px; margin: 0 auto; border-top: 1px solid rgba(241,235,224,.16); }
.faq-item { padding: 28px 0; border-bottom: 1px solid rgba(241,235,224,.16); display: grid; grid-template-columns: .65fr 1fr; gap: 42px; }
.faq-item h3 { color: var(--cream); font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.12; }
.faq-item p { color: rgba(241,235,224,.74); line-height: 1.65; }
.cluster-cta { position: sticky; bottom: 0; z-index: 20; background: rgba(16,38,51,.94); color: var(--cream); border-top: 1px solid rgba(241,235,224,.13); backdrop-filter: blur(14px); }
.cluster-cta .container { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.cluster-cta p { font-family: var(--serif); font-size: 20px; }
.cluster-cta a { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--tan); text-transform: uppercase; }
.network-foot { padding: 42px 0; background: var(--teal-deep); color: rgba(241,235,224,.7); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.network-foot a { color: var(--tan); }
@media (max-width: 900px) {
  .container { padding: 0 22px; }
  .nav { padding: 20px 22px; }
  .nav ul { display: none; }
  .cluster-hero { min-height: auto; padding: 140px 0 58px; }
  .cluster-mast, .field-layout, .faq-item { grid-template-columns: 1fr; gap: 30px; }
  .cluster-mast h1 { font-size: clamp(68px, 23vw, 112px); }
  .feature-grid, .scenario-grid, .tips-grid, .reading-list { grid-template-columns: 1fr; }
  .feature-card.wide { grid-column: span 1; }
  .section-heading { grid-template-columns: 1fr; }
  .matrix-row { grid-template-columns: 1fr; gap: 6px; }
  .hero-credit { display: none; }
}