/* 私人旅程页 v14 · 2026-10-02 · 叠在 home.css 之上（同一套 Editorial Visual Direction）
   只补这一页用到的段落：封面文字、段首标题、编辑说明、旅程系列、三个步骤、给在意旅程的人。
   颜色全部沿用 home.css 变量：--paper / --panel / --ink / --ink-2 / --muted / --zel / --gold / --night。 */

/* ---------- 封面：左对齐、白字，自带深海军蓝渐层（不依赖首页封面的设定） ---------- */
.pn .pj-hero{text-align:left;color:#fff;background:var(--night)}
.pn .pj-hero .hero-bg::after{background:linear-gradient(90deg,rgba(15,42,68,.82) 0%,rgba(15,42,68,.6) 42%,rgba(15,42,68,.15) 78%),linear-gradient(0deg,rgba(15,42,68,.45),rgba(15,42,68,0) 45%)}
.pn .pj-hero .hero-in{padding-top:170px;padding-bottom:clamp(96px,12vh,150px)}
.pn .pj-hero .eb{font-size:15px;color:rgba(255,255,255,.86)}
.pn .pj-hero .eb::before{content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin:0 14px 3px 0}
.pn .pj-hero h1{margin-top:20px;max-width:19em;font-size:clamp(40px,4.4vw,64px);line-height:1.18;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.pn.zh .pj-hero h1{max-width:none;font-size:clamp(36px,3.8vw,56px);line-height:1.45;letter-spacing:.02em}
.pn .hero-s{margin-top:26px;max-width:34em;font-size:18px;line-height:1.65;color:rgba(255,255,255,.92)}
.pn .hero-t{margin-top:16px;font:500 15px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.pn.zh .hero-t{letter-spacing:.06em}
.pn .hero-go{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px;margin-top:36px}
.pn .hero-go .more{color:#fff;border-bottom:2px solid var(--zel);padding-bottom:4px}
.pn .hero-go .more i{color:var(--zel)}

/* ---------- 段首：小标（金色细线）+ 两行标题（第二行 ZeL Blue）+ 说明 ---------- */
.pn .pj-sec{padding:clamp(80px,9vw,136px) 0}
.pn .sec-hd{max-width:860px;margin-bottom:clamp(40px,4.4vw,64px)}
.pn .sec-hd .eb{font-size:15px}
.pn .sec-hd .eb::before{content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin:0 14px 3px 0}
.pn .sec-hd h2{margin-top:14px;font-size:clamp(30px,3.2vw,46px);line-height:1.6;text-wrap:balance}
.pn.zh .sec-hd h2{font-size:clamp(28px,2.8vw,42px)}
.pn .sec-hd>p:not(.eb){margin-top:18px;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:40em}
.pn .sec-hd .more{margin-top:22px}

/* 精选旅程卡：只写晚数，标签一行就够 */
.pn .sel .pc .eb{min-height:3em}

/* ---------- 编辑说明：居中标题 → 正文 → 图文块（重点三句用 ZeL Blue） ---------- */
.pn .why{padding-bottom:clamp(80px,9vw,136px)}
.pn .why-body{max-width:760px;margin:clamp(32px,3.4vw,48px) auto 0}
.pn .why-body p{font-size:clamp(19px,1.5vw,21px);line-height:1.85;color:var(--ink)}
.pn .why-body p+p{margin-top:20px}
.pn .more-than{margin-top:clamp(64px,7vw,104px)}
.pn .more-than{align-items:stretch}
.pn .more-than figure{aspect-ratio:auto;width:100%;height:100%;min-height:420px} /* 图随文字高度伸缩，宽度不超出左栏（英文文字较长时曾溢出盖住文字） */
.pn .more-than .mblock-in .lead{margin-top:16px;color:var(--ink)}
.pn .hl-lines{list-style:none;margin:26px 0 0;padding:22px 0;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.pn .hl-lines li{font:500 clamp(22px,1.9vw,27px)/1.6 var(--serif);color:var(--zel)}
.pn .more-than .mblock-in .end{margin-top:22px;color:var(--ink-2)}

/* ---------- 旅程系列：三栏，每栏一张照片 ---------- */
.pn .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,40px)}
.pn .col figure{aspect-ratio:4/5;overflow:hidden} /* 与产品卡、已交付卡同为直幅（Zelts 2026-10-03） */
.pn .col img{width:100%;height:100%;object-fit:cover}
.pn .col .eb{margin-top:20px;font-size:16px;letter-spacing:.12em}
.pn .col h3{margin-top:8px;font-size:clamp(24px,2vw,30px);line-height:1.3}
.pn .col p:not(.eb){margin-top:12px;font-size:18px;line-height:1.8;color:var(--ink-2)}
.pn .col .where{padding-top:14px;border-top:1px solid var(--gold-line);font-size:16px!important;color:var(--muted)!important}

/* ---------- 真正走过的旅程：浅暖底，与上下段分开 ---------- */
.pn .hap{background:var(--panel)}
.pn .hap .pc .eb{min-height:3em}

/* ---------- 三个步骤 ---------- */
.pn .steps3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr)}
.pn .steps3 li{padding:0 clamp(18px,2.4vw,40px);border-left:1px solid var(--gold-line)}
.pn .steps3 li:first-child{padding-left:0;border-left:0}
.pn .steps3 b{display:block;font:400 40px/1 var(--serif);color:var(--zel)}
.pn .steps3 b::after{content:"";display:block;width:24px;height:1px;background:var(--gold);margin-top:18px}
.pn .steps3 h4{margin-top:18px;font-size:clamp(22px,1.8vw,26px);line-height:1.35}
.pn .steps3 p{margin-top:12px;font-size:18px;line-height:1.8;color:var(--ink-2)}

/* ---------- 给在意旅程的人：安静的一段，居中 ---------- */
.pn .who{padding-top:0;padding-bottom:clamp(64px,6vw,96px)}
.pn .who-in{max-width:820px;margin:0 auto;text-align:center;padding-top:clamp(56px,6vw,88px);border-top:1px solid var(--gold-line)}
.pn .who h2{font-size:clamp(26px,2.4vw,36px);line-height:1.5;text-wrap:balance}
.pn .who ul{list-style:none;margin-top:26px}
.pn .who li{font-size:clamp(19px,1.5vw,21px);line-height:1.9;color:var(--ink-2)}

/* ---------- 收尾（深海军蓝，沿用首页 .talk） ---------- */
.pn.pj .talk h2{line-height:1.35}

/* ---------- 响应式 ---------- */
@media(max-width:1080px){.pn .cols{grid-template-columns:1fr 1fr}.pn .cols .col:last-child{grid-column:1/-1;max-width:calc(50% - 16px)}}
@media(max-width:900px){
  .pn .more-than figure{aspect-ratio:4/3;height:auto;min-height:0;width:88%}
  .pn .steps3{grid-template-columns:1fr;row-gap:36px}
  .pn .steps3 li{padding:0;border-left:0}
}
@media(max-width:820px){
  .pn .pj-hero{justify-content:flex-end}
  .pn .pj-hero .hero-bg::after{background:linear-gradient(0deg,rgba(15,42,68,.88) 0%,rgba(15,42,68,.55) 55%,rgba(15,42,68,.15) 100%)}
  .pn .pj-hero .hero-in{padding-top:clamp(150px,30svh,240px);padding-bottom:48px}
  .pn .cols{grid-template-columns:1fr;row-gap:48px}
  .pn .cols .col:last-child{max-width:none}
}
@media(max-width:480px){
  .pn .pj-hero h1{font-size:clamp(32px,9.25vw,36px)}
  .pn.zh .pj-hero h1{font-size:clamp(30px,8.4vw,36px);line-height:1.18}
  .pn .hero-go{flex-direction:column;align-items:stretch}
  .pn .hero-go .more{align-self:flex-start}
  .pn .sec-hd h2{font-size:30px}
  .pn.zh .sec-hd h2{font-size:30px}
}
@media print{
  .pn .pj-hero .eb,.pn .hero-s,.pn .hero-t,.pn .hero-go .more{color:var(--ink)}
  .pn .hap{background:none}
}

/* ---------- 2026-10-02：本页样式与首页脱钩（private-base.css 是首页样式的定版副本） ---------- */
/* 产品卡与已交付卡：固定三栏，手机一栏 */
.pn.pj .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.pn.pj .pc .eb{min-height:3em}
@media(max-width:820px){.pn.pj .pgrid{grid-template-columns:1fr;row-gap:56px}.pn.pj .pc .eb{min-height:0}}

/* =====================================================================
   v15 · 2026-10-03 · Copy Master v2.0 的 9 段
   02 出发的理由 · 03 五种可能 · 04 目的地（编辑式不对称）· 05 产品 · 06 罗弗敦的一天 · 07 五句 · 08 已交付
   ===================================================================== */
.pn .hero-go .btn{min-height:58px}

/* 02 — 每一次出发，都有自己的理由 */
.pn .idea-in{max-width:880px;margin:0 auto;text-align:center}
.pn .idea h2{font-size:clamp(30px,3.2vw,46px);line-height:1.6;text-wrap:balance}
.pn .reasons{list-style:none;margin:clamp(36px,4vw,56px) auto 0;padding:clamp(28px,3vw,40px) 0;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.pn .reasons li{font:400 19px/1.6 var(--serif);color:var(--ink)}
.pn .idea-end{margin-top:clamp(32px,3.4vw,48px);font:400 clamp(22px,2vw,30px)/1.7 var(--serif);color:var(--ink)}

/* 03 — 五种可能：标题 + 一句 */
.pn .poss{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2vw,32px)}
.pn .poss li{padding-top:22px;border-top:1px solid var(--gold-line)}
.pn .poss h3{font-size:clamp(21px,1.6vw,24px);line-height:1.35}
.pn .poss p{margin-top:12px;font-size:18px;line-height:1.75;color:var(--ink-2)}

/* 04 — 目的地：一大、一局部、一小、一横 */
.pn .dest{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,3vw,48px) clamp(24px,3vw,48px);align-items:stretch}
.pn .dt{margin:0;display:flex;flex-direction:column;background:none}
.pn .dt .ph{overflow:hidden;background:var(--panel-2)}
.pn .dt img{width:100%;height:100%;object-fit:cover}
.pn .dt1{grid-column:1;grid-row:1/3}
.pn .dt1 .ph{flex:1;min-height:560px}
.pn .dt2 .ph{aspect-ratio:4/3}
.pn .dt2 img{transform:scale(1.35);transform-origin:50% 60%} /* 只露局部 */
.pn .dt3 .ph{aspect-ratio:3/2}
.pn .dt4{grid-column:1/-1}
.pn .dt4 .ph{aspect-ratio:21/8}
.pn .dt figcaption{padding-top:18px}
.pn .dt b{display:block;font:400 clamp(26px,2.2vw,32px)/1.25 var(--serif);color:var(--ink)}
.pn .dt em{display:block;margin-top:4px;font:500 15px/1.4 var(--sans);font-style:normal;letter-spacing:.16em;color:var(--muted)}
.pn .dt span{display:block;margin-top:8px;font-size:18px;line-height:1.7;color:var(--ink-2)}

/* 05 — 现在可以出发的旅程：每张卡有明显的 Explore Journey 按钮 */
.pn .take .pc .route{margin-top:6px;font-size:15px!important;letter-spacing:.04em;color:var(--muted)!important;flex-grow:0!important}
.pn .take .pc .btn{align-self:flex-start;margin-top:22px;min-height:52px;padding:0 24px;font-size:16px}
.pn .take a.pc:hover .btn{background:var(--night);border-color:var(--night)}

/* 06 — 罗弗敦的一天 */
.pn .day-s{background:var(--panel)}
.pn .day-g{display:grid;grid-template-columns:5fr 6fr;gap:clamp(36px,5vw,80px);align-items:stretch}
.pn .day-g figure{margin:0;overflow:hidden;min-height:520px}
.pn .day-g figure img{width:100%;height:100%;object-fit:cover}
.pn .day-tx{align-self:center}
.pn .day-tx .eb{font-size:15px}
.pn .day-tx .eb::before{content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin:0 14px 3px 0}
.pn .day-tx h2{margin-top:14px;font-size:clamp(30px,3vw,44px);line-height:1.5}
.pn .tl{list-style:none;margin-top:clamp(24px,2.6vw,36px)}
.pn .tl li{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--gold-line)}
.pn .tl li:last-child{border-bottom:1px solid var(--gold-line)}
.pn .tl b{font:500 15px/1.7 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.pn.zh .tl b{letter-spacing:.06em;font-size:15px}
.pn .tl span{font-size:17px;line-height:1.65;color:var(--ink)}
.pn .day-tx .note{margin-top:20px;font-size:17px;line-height:1.8;color:var(--ink-2)}
.pn .day-end{margin-top:22px;font:500 19px/1.5 var(--serif);color:var(--zel)}
.pn .day-tx .more{margin-top:20px}

/* 07 — 你可以期待的：左标题，右五句 */
.pn .exp-g{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,5vw,96px);align-items:start}
.pn .exp-g .sec-hd{margin-bottom:0}
.pn .exp{list-style:none}
.pn .exp li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;padding:22px 0;border-top:1px solid var(--gold-line)}
.pn .exp li:last-child{border-bottom:1px solid var(--gold-line)}
.pn .exp h3{font-size:clamp(21px,1.7vw,25px);line-height:1.4}
.pn .exp p{font-size:19px;line-height:1.7;color:var(--ink-2)}

/* 响应式 */
@media(max-width:1080px){
  .pn .poss{grid-template-columns:repeat(3,1fr);row-gap:36px}
  .pn .exp-g{grid-template-columns:1fr}
}
@media(max-width:900px){
  .pn .dest{grid-template-columns:1fr}
  .pn .dt1,.pn .dt4{grid-column:auto;grid-row:auto}
  .pn .dt1 .ph{flex:none;min-height:0;aspect-ratio:4/5}
  .pn .dt4 .ph{aspect-ratio:4/3}
  .pn .day-g{grid-template-columns:1fr}
  .pn .day-g figure{min-height:0;aspect-ratio:4/3}
}
@media(max-width:600px){
  .pn .poss{grid-template-columns:1fr;row-gap:28px}
  .pn .exp li{grid-template-columns:1fr;gap:6px}
  .pn .tl li{grid-template-columns:1fr;gap:4px}
  .pn .idea h2{font-size:30px}
  .pn .reasons li{font-size:19px;line-height:1.6;padding:4px 0}
  .pn .idea-end{font-size:22px}
}
@media print{.pn .day-s{background:none}.pn .dt2 img{transform:none}}

/* Phase 3 · section 03 as an editorial index: neutral uppercase label + one line */
.pn .poss h3{font:500 15px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.pn .poss p{margin-top:14px;font-family:var(--serif);font-size:clamp(20px,1.5vw,22px);line-height:1.6;color:var(--ink)}
.pn.zh .poss p{font-size:clamp(19px,1.4vw,21px);line-height:1.8}
/* product facts line: break only between facts, and keep titles aligned across the three cards */
.pn .take .pc .eb .seg{white-space:nowrap}
.pn .take .pc .eb{min-height:4.35em}
@media (max-width:820px){.pn .take .pc .eb{min-height:0}}

/* ---------- Phase 4 · visual / conversion (10-03) ---------- */
/* hero copy starts on the same left edge as every section below (was centred as a block, 247px further in) */
.pn .pj-hero .hero-in{width:100%;margin-left:auto;margin-right:auto}
/* section 03: labels wrap to one or two lines at five columns; reserve two so the lines below sit level */
@media (min-width:1081px){.pn .poss h3{min-height:3em}}
/* one size for running copy: card text, the Lofoten note and the closing paragraph join the 19px body */
.pn.pj .pc p:not(.eb):not(.route){font-size:17px;line-height:1.65}
.pn .day-tx .note{font-size:17px;line-height:1.65}
.pn.pj .talk h2 + p{font-size:19px;line-height:1.65}
/* four paper sections in a row (02–05): halve the double gap where one paper section follows another */
.pn .idea + .poss-s,.pn .poss-s + .dest-s,.pn .dest-s + .take{padding-top:clamp(40px,4.5vw,72px)}
/* text links are tap targets too: at least 44px tall */
.pn.pj .day-tx .more,.pn.pj .sec-hd .more{position:relative}
.pn.pj .day-tx .more::after,.pn.pj .sec-hd .more::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px} /* invisible hit area, the underline stays where it is */
/* no one-character last lines (e.g. 「方。」「村。」) in the running copy */
.pn.pj .reasons li,.pn.pj .tl span,.pn.pj .note,.pn.pj .pc p,.pn.pj .poss p,.pn.pj .exp p,.pn.pj .talk p{text-wrap:pretty}
@media (max-width:600px){
  .pn.pj .reasons li{font-size:19px} /* each reason stays on one line at 390 */
}
/* hero button clears the floating WhatsApp button */
@media (max-width:820px){.pn .pj-hero .hero-in{padding-bottom:104px}.pn.pj .talk h2 + p{font-size:18px}}
.pn.pj .day-tx .eb .seg{white-space:nowrap}
/* Phase 4b · mobile only: a 开始对话 button after section 07, so the conversation is reachable mid-page (desktop has it in the header) */
.pn .m-talk{display:none}
@media (max-width:820px){.pn .m-talk{display:block;margin-top:40px}.pn .m-talk .btn{width:100%}}
/* NZ banner: keep Aoraki and the winding road in frame */
.pn .dt4 .ph img{object-position:50% 60%}

/* ---------- 10-03 · 02 + 03 lighter: less wall of text ---------- */
/* 02: heading left, five reasons as a numbered list right, closing line under the list */
.pn .idea-in{max-width:none;text-align:left;display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(40px,6vw,120px);align-items:start}
.pn .idea h2{grid-column:1;grid-row:1/3;text-wrap:balance}
.pn .reasons{grid-column:2;margin:0;padding:0;border:0;counter-reset:rs}
.pn .reasons li{counter-increment:rs;display:grid;grid-template-columns:44px 1fr;align-items:baseline;padding:16px 0;border-top:1px solid var(--gold-line)}
.pn .reasons li:last-child{border-bottom:1px solid var(--gold-line)}
.pn .reasons li::before{content:counter(rs,decimal-leading-zero);font:500 15px/1 var(--sans);letter-spacing:.08em;color:var(--gold)}
.pn .idea-end{grid-column:2;margin-top:clamp(28px,3vw,40px)}
@media (max-width:900px){
  .pn .idea-in{grid-template-columns:1fr}
  .pn .idea h2,.pn .reasons,.pn .idea-end{grid-column:1;grid-row:auto}
  .pn .reasons{margin-top:28px}
}
@media (max-width:600px){.pn .reasons li{grid-template-columns:36px 1fr;padding:12px 0}}
/* 03: five photo cards — the picture carries it, one label and one line underneath */
.pn .poss li{padding-top:0;border-top:0}
.pn .poss figure{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2,#eee)}
.pn .poss figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.pn .poss li:hover figure img{transform:scale(1.04)}
.pn .poss-t{padding-top:18px}
.pn .poss h3{min-height:0!important}
@media (min-width:1081px){.pn .poss-t h3{min-height:3em!important}}
@media (max-width:600px){
  /* phone: thumbnail beside the words, so five items stay short */
  .pn .poss{row-gap:16px}
  .pn .poss li{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center}
  .pn .poss figure{aspect-ratio:4/5}
  .pn .poss-t{padding-top:0}
  .pn .poss p{margin-top:6px}
}
@media (min-width:901px){.pn .idea-in{grid-template-columns:4fr 8fr}.pn.zh .idea h2{font-size:clamp(30px,2.7vw,40px)}.pn.zh .idea h2 .zb{white-space:nowrap}}
.pn .poss li:nth-child(5) figure img{object-position:78% 50%}

/* ---------- 10-03 · 07 「我们在意旅程里的什么？」: numbered, title over its sentence ---------- */
.pn .exp{counter-reset:ex}
.pn .exp li{counter-increment:ex;grid-template-columns:44px 1fr;column-gap:0;row-gap:8px;padding:24px 0}
.pn .exp li::before{content:counter(ex,decimal-leading-zero);grid-row:1/3;padding-top:.45em;font:500 15px/1 var(--sans);letter-spacing:.08em;color:var(--gold)}
.pn .exp h3,.pn .exp p{grid-column:2}
.pn .exp p{font-size:19px;line-height:1.75}
@media (max-width:600px){.pn .exp li{grid-template-columns:36px 1fr;padding:20px 0}}

/* 2026-10-03 · blue TEXT on Paper/Panel uses the darker text tone #26769C (4.8:1), as on Method and Home.
   ZeL Blue stays for numbers, buttons, rules and blue on navy or photographs. */
.pn .zb,.pn .day-end,.pn .cap-line,.pn .lx-tag span{color:#26769C}
.pn .talk .zb,.pn .hero .zb,.pn .band .zb{color:var(--zel)}

/* 2026-10-12 · entry-pages typography: Chinese body text keeps line-height 1.8 (EN 1.65) */
.pn.zh .hero-s,.pn.zh .sec-hd>p:not(.eb),.pn.zh .tl span,.pn.zh.pj .pc p:not(.eb):not(.route),.pn.zh .day-tx .note,.pn.zh.pj .talk h2 + p{line-height:1.8}

/* 2026-10-15 · Journeys you can take: five cards (THE TEA ROAD and THE MIST VALLEYS added); the second row of two sits centred under the first row of three */
.pn a.jcard:is([href*="collections/tea-road"],[href*="collections/mist-valleys"]) h3{letter-spacing:.02em}
@media(min-width:821px){.pn.pj .take .pgrid{grid-template-columns:repeat(6,minmax(0,1fr))}.pn.pj .take .pgrid>.jcard{grid-column:span 2}.pn.pj .take .pgrid>.jcard:nth-child(4){grid-column:2 / span 2}}
