:root{
    /* palette — from brief */
    --ivory:#FBF6EC;
    --cream:#F5EEDF;
    --beige:#EFE6D3;
    --stone:#E7DCC6;
    --line:#D8CBB0;
    --line-soft:#E3D8C2;
    --charcoal:#2A2521;
    --brown:#5A4634;
    --muted:#7A6B57;
    --red:#AE3328;
    --red-deep:#882418;
    /* accents — used sparingly */
    --porcelain:#5E7E92;
    --teal:#4F7A75;
    --terracotta:#B5694A;

    --serif:'Cormorant Garamond', Georgia, serif;
    --serif-zh:'Noto Serif SC', serif;
    --sans:'Inter', system-ui, sans-serif;
    --sans-zh:'Noto Sans SC', sans-serif;

    --wrap:1180px;
    --pad:clamp(1.25rem, 5vw, 4rem);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  :target{scroll-margin-top:96px}
  body{
    font-family:var(--sans);
    color:var(--charcoal);
    background:var(--ivory);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body.lang-zh-active{font-family:var(--sans-zh)}

  /* language switching: each translatable node carries .l-en / .l-zh */
  html.lang-mode-en .l-zh{display:none}
  html.lang-mode-zh .l-en{display:none}
  /* always-bilingual brand lines use .bi (never hidden) */

  .l-zh{font-family:var(--sans-zh)}
  h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:.01em;color:var(--brown)}
  h2.l-zh,h3.l-zh,.serif.l-zh,.serif-zh{font-family:var(--serif-zh);font-weight:500}

  .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}

  /* ---------- header ---------- */
  header.site{
    position:sticky;top:0;z-index:60;
    background:rgba(251,246,236,.88);backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .nav{display:flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);height:80px}
  .logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
  .logo .mark{
    width:42px;height:42px;border-radius:50%;background:var(--red);
    color:var(--ivory);display:grid;place-items:center;
    font-family:var(--sans);font-weight:600;font-size:.5rem;letter-spacing:.025em;
    box-shadow:0 1px 0 rgba(0,0,0,.06);
  }
  .nav-links{display:flex;flex:1;justify-content:center;gap:clamp(1.5rem,2.4vw,2.6rem)}
  .nav-links a{font-size:.9rem;color:var(--charcoal);letter-spacing:.01em;padding:.4rem 0;position:relative;white-space:nowrap}
  .nav-links a .l-zh{letter-spacing:.16em;margin-right:-.16em}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:.1rem;width:0;height:1px;background:var(--red);transition:width .25s}
  .nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}
  .nav-right{display:flex;align-items:center;gap:1.2rem;flex-shrink:0}
  .lang-switch{display:flex;align-items:center;font-size:.8rem;color:var(--muted);gap:.35rem;background:none;border:none;cursor:pointer;font-family:var(--sans)}
  .lang-switch b{color:var(--charcoal);font-weight:500}
  .lang-switch .sep{opacity:.4}
  .btn{
    display:inline-block;font-size:.85rem;font-weight:500;letter-spacing:.01em;
    padding:.62rem 1.25rem;border-radius:2px;transition:all .2s;cursor:pointer;border:1px solid transparent;
    font-family:inherit;text-align:center;
  }
  .btn-primary{background:var(--red);color:var(--ivory)}
  .btn-primary:hover{background:var(--red-deep)}
  .btn-ghost{border-color:var(--line);color:var(--brown);background:transparent}
  .btn-ghost:hover{border-color:var(--brown);background:var(--cream)}
  .nav .btn-primary{padding:.5rem 1.1rem}

  .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem;margin-left:.4rem}
  .menu-toggle span{display:block;width:22px;height:1.5px;background:var(--charcoal);margin:5px 0;transition:.25s}
  .mobile-menu,.menu-backdrop{display:none}

  /* ---------- hero ---------- */
  .hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,5vw,4.5rem)}
  .hero-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
  .brand-block .word{
    font-family:var(--serif);font-weight:600;color:var(--red);
    font-size:clamp(3.4rem,8vw,6rem);line-height:.95;letter-spacing:.02em;
  }
  .brand-block .tag{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--brown);margin-top:.7rem;font-weight:500;line-height:1.15}
  .brand-block .tag-zh{font-family:var(--serif-zh);font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--brown);margin-top:.15rem;font-weight:500;letter-spacing:.04em}
  .brand-block .sub{display:flex;flex-wrap:wrap;gap:.1rem .7rem;margin-top:1.1rem;color:var(--muted);font-size:.98rem;letter-spacing:.02em}
  .brand-block .sub .sub-zh{font-family:var(--sans-zh)}
  .rule{width:54px;height:2px;background:var(--red);margin:1.6rem 0 1.4rem}
  .hero-intro{font-size:1.04rem;color:var(--charcoal);max-width:34ch;line-height:1.7}
  .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:1.8rem}
  .text-link{font-size:.9rem;color:var(--brown);border-bottom:1px solid var(--line);padding-bottom:2px;transition:.2s}
  .text-link:hover{color:var(--red);border-color:var(--red)}

  /* ---------- upload frame (signature: every photo is owner-uploaded) ---------- */
  .frame{
    position:relative;width:100%;border-radius:3px;overflow:hidden;
    background:
      linear-gradient(135deg, rgba(94,126,146,.06), rgba(181,105,74,.07)),
      var(--stone);
    border:1px solid var(--line);
    background-size:cover;background-position:center;
    aspect-ratio:4/3;transition:box-shadow .3s, transform .3s;
    display:grid;place-items:center;text-align:center;
  }
  .frame.tall{aspect-ratio:3/4}
  .frame.wide{aspect-ratio:16/11}
  .frame.portrait{width:200px;max-width:100%;aspect-ratio:1/1;border-radius:50%}
  .frame:hover{box-shadow:0 10px 30px rgba(60,45,30,.13)}
  .frame>img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }
  .frame .ph{padding:1.4rem;color:var(--muted);pointer-events:none;transition:opacity .3s}
  .frame.filled .ph{opacity:0}
  .frame .ph svg{width:30px;height:30px;stroke:var(--brown);opacity:.55;margin:0 auto .55rem}
  .frame .ph .t{font-size:.82rem;color:var(--brown);letter-spacing:.02em}
  .frame .ph .t .l-zh{display:block;font-family:var(--sans-zh);margin-top:.1rem}
  .frame .ph .hint{font-size:.68rem;color:var(--muted);margin-top:.5rem;opacity:.85}

  /* tile motif divider */
  .tile-divider{display:flex;justify-content:center;padding-block:clamp(1.5rem,4vw,3rem)}
  .tile-divider svg{opacity:.5}

  /* ---------- section scaffolding ---------- */
  section{padding-block:clamp(3rem,7vw,6rem)}
  .eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);font-weight:600;margin-bottom:.9rem}
  .eyebrow.l-zh{font-family:var(--sans-zh);letter-spacing:.1em}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,4vw,3rem)}
  .sec-title{font-size:clamp(1.8rem,4vw,2.7rem)}
  .sec-title-zh{font-family:var(--serif-zh);font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--brown);margin-top:.2rem;font-weight:500;letter-spacing:.04em}
  .sec-lead{max-width:46ch;color:var(--muted);font-size:1rem;line-height:1.7}

  /* ---------- categories ---------- */
  .cats{background:var(--cream);border-block:1px solid var(--line-soft)}
  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.4rem)}
  .cat{padding-top:.4rem}
  .cat .ico{width:34px;height:34px;stroke:var(--brown);stroke-width:1.3;fill:none;margin-bottom:1rem}
  .cat h3{font-size:1.35rem;color:var(--brown)}
  .cat .h-zh{font-family:var(--serif-zh);font-size:1.05rem;color:var(--brown);margin-top:.15rem;font-weight:500}
  .cat p{font-size:.9rem;color:var(--muted);margin-top:.7rem;line-height:1.65}
  .cat p.l-zh{font-family:var(--sans-zh)}

  /* ---------- featured tours ---------- */
  .tours-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3.5vw,2.8rem)}
  .tour-card{display:flex;flex-direction:column;transition:transform .3s}
  .tour-card:hover{transform:translateY(-3px)}
  .tour-card .frame{aspect-ratio:5/4}
  .tour-body{padding-top:1.1rem}
  .tour-card h3{font-size:1.5rem;color:var(--brown)}
  .tour-card .h-zh{font-family:var(--serif-zh);font-size:1.05rem;color:var(--brown);margin-top:.1rem;font-weight:500}
  .tour-card .desc{font-size:.92rem;color:var(--muted);margin-top:.6rem;line-height:1.65}
  .tour-card .desc.l-zh{font-family:var(--sans-zh)}
  .meta{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-top:1rem;font-size:.78rem;color:var(--brown)}
  .meta span{display:inline-flex;align-items:center;gap:.4rem}
  .meta svg{width:14px;height:14px;stroke:var(--terracotta);stroke-width:1.4;fill:none;flex-shrink:0}
  .meta .m-zh{font-family:var(--sans-zh)}
  .view-link{margin-top:1.1rem;font-size:.84rem;color:var(--red);display:inline-flex;align-items:center;gap:.4rem;transition:gap .2s}
  .view-link:hover{gap:.7rem}
  .view-link svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none}

  /* ---------- personalised itinerary ---------- */
  .itin{background:var(--beige);border-block:1px solid var(--line-soft)}
  .itin-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
  .interests{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.6rem 0}
  .chip{
    border:1px solid var(--line);background:var(--ivory);color:var(--brown);
    font-size:.8rem;padding:.42rem .9rem;border-radius:999px;cursor:pointer;transition:.2s;
    font-family:inherit;display:inline-flex;gap:.35rem;align-items:center;
  }
  .chip .l-zh{font-family:var(--sans-zh)}
  .chip:hover{border-color:var(--terracotta);color:var(--terracotta)}
  .chip.on{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
  /* notebook preview */
  .notebook{background:var(--ivory);border:1px solid var(--line);border-radius:4px;padding:clamp(1.2rem,3vw,1.8rem);box-shadow:0 12px 34px rgba(70,55,40,.08)}
  .notebook .nb-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:.7rem;margin-bottom:1rem}
  .notebook .nb-top .nb-t{font-family:var(--serif);font-size:1.3rem;color:var(--brown)}
  .notebook .nb-top .nb-t-zh{font-family:var(--serif-zh);font-size:.95rem;color:var(--muted)}
  .notebook .nb-tag{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);border:1px solid var(--line);padding:.15rem .5rem;border-radius:2px}
  .nb-row{display:grid;grid-template-columns:64px 1fr;gap:.9rem;padding:.55rem 0;border-bottom:1px solid var(--line-soft)}
  .nb-row:last-child{border-bottom:none}
  .nb-time{font-size:.78rem;color:var(--terracotta);font-variant-numeric:tabular-nums;padding-top:.1rem}
  .nb-what{font-size:.9rem;color:var(--charcoal)}
  .nb-what .l-zh{font-family:var(--sans-zh)}
  .nb-what small{display:block;color:var(--muted);font-size:.78rem;margin-top:.1rem}
  .nb-what small.l-zh{font-family:var(--sans-zh)}
  .nb-frame{margin-bottom:1rem}

  /* ---------- approach ---------- */
  .approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
  .principles{list-style:none;display:grid;gap:.1rem}
  .principles li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
  .principles li .n{font-family:var(--serif);color:var(--terracotta);font-size:1.1rem;font-variant-numeric:tabular-nums}
  .principles li .p-en{font-size:1rem;color:var(--charcoal)}
  .principles li .p-zh{font-size:.92rem;color:var(--muted);font-family:var(--sans-zh)}
  .approach-text p{color:var(--muted);font-size:1.02rem;line-height:1.75;margin-bottom:1rem}
  .approach-text p.l-zh{font-family:var(--sans-zh)}

  /* ---------- guide ---------- */
  .guide{background:var(--cream);border-block:1px solid var(--line-soft)}
  .guide-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
  .guide-name{font-family:var(--serif);font-size:1.7rem;color:var(--brown)}
  .guide-name-zh{font-family:var(--serif-zh);font-size:1.1rem;color:var(--brown);margin-top:.1rem;font-weight:500}
  .guide-role{font-size:.82rem;letter-spacing:.05em;color:var(--terracotta);text-transform:uppercase;margin:.5rem 0 1rem}
  .guide-role.l-zh{font-family:var(--sans-zh);text-transform:none;letter-spacing:.04em}
  .guide p{color:var(--muted);font-size:1rem;line-height:1.7;max-width:52ch}
  .guide p.l-zh{font-family:var(--sans-zh)}
  .guide .langs{font-size:.82rem;color:var(--brown);margin-top:1rem}

  /* ---------- journal ---------- */
  .journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.5vw,2.5rem)}
  .story{cursor:pointer}
  .story .frame{aspect-ratio:4/3}
  .story h3{font-size:1.25rem;color:var(--brown);margin-top:.9rem}
  .story .h-zh{font-family:var(--serif-zh);font-size:.95rem;color:var(--muted);margin-top:.1rem;font-weight:500}
  .story .ex{font-size:.85rem;color:var(--muted);margin-top:.5rem;line-height:1.6}
  .story .ex.l-zh{font-family:var(--sans-zh)}

  /* ---------- closing cta ---------- */
  .closing{background:var(--stone);text-align:center}
  .closing h2{font-size:clamp(1.9rem,4vw,2.8rem)}
  .closing .h-zh{font-family:var(--serif-zh);font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--brown);margin-top:.25rem;font-weight:500}
  .closing p{color:var(--muted);max-width:42ch;margin:1rem auto 0}
  .closing p.l-zh{font-family:var(--sans-zh)}
  .closing .cta{display:flex;gap:1rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap}

  /* ---------- footer ---------- */
  footer.site{background:var(--red-deep);color:#F1E4D2}
  .foot-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2rem;padding-block:clamp(2.5rem,5vw,4rem)}
  .foot-brand .mark{width:46px;height:46px;border-radius:50%;background:var(--ivory);color:var(--red);display:grid;place-items:center;font-weight:600;font-size:.62rem;letter-spacing:.06em;font-family:var(--sans);margin-bottom:1rem}
  .foot-brand .ft-tag{font-family:var(--serif);font-size:1.25rem;color:#fff}
  .foot-brand .ft-tag-zh{font-family:var(--serif-zh);font-size:1rem;color:#EAD6BF;margin-top:.15rem}
  .foot-col h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#E0B9A6;margin-bottom:1rem;font-weight:600}
  .foot-col h4.l-zh{font-family:var(--sans-zh);letter-spacing:.06em}
  .foot-col a{display:block;font-size:.86rem;color:#EFE0CE;padding:.32rem 0;opacity:.9;transition:.2s}
  .foot-col a:hover{opacity:1;color:#fff;padding-left:.2rem}
  .foot-col a.l-zh{font-family:var(--sans-zh)}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.13);padding-block:1.3rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:#D8BBA8}
  .foot-bottom .l-zh{font-family:var(--sans-zh)}

  /* ---------- mobile fixed book button (shown only on small screens) ---------- */
  .mobile-book{display:none}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  :focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:2px}

  /* ====================== responsive ====================== */
  @media (max-width:1080px){
    .cat-grid{grid-template-columns:repeat(2,1fr);gap:2rem}
    .journal-grid{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width:860px){
    header.site{z-index:90}
    .nav-links{display:none}
    .nav-right .lang-switch{display:flex}
    .nav .btn-primary{display:none}
    .menu-toggle{display:block}
    .hero-grid{grid-template-columns:1fr}
    .hero{padding-top:1.5rem}
    .hero-media{order:-1;margin-bottom:1.6rem}
    .tours-grid{grid-template-columns:1fr;gap:2.4rem}
    .itin-grid{grid-template-columns:1fr}
    .approach-grid{grid-template-columns:1fr;gap:2.2rem}
    .journal-grid{grid-template-columns:1fr;gap:2.4rem}
    .guide-grid{grid-template-columns:1fr;text-align:center}
    .guide-grid .frame.portrait{margin:0 auto}
    .guide p{margin-inline:auto}
    .foot-top{grid-template-columns:1fr 1fr;gap:1.6rem 2rem}
    .foot-brand{grid-column:1/-1}
    /* mobile slide menu */
    .mobile-menu{
      position:fixed;inset:0 0 0 auto;width:min(82%,320px);background:var(--ivory);
      z-index:80;transform:translateX(100%);transition:transform .3s;box-shadow:-12px 0 40px rgba(0,0,0,.12);
      padding:5rem 2rem 2rem;display:flex;flex-direction:column;gap:.3rem;
    }
    .mobile-menu.open{transform:none}
    .mobile-menu a{font-family:var(--serif);font-size:1.4rem;color:var(--brown);padding:.7rem 0;border-bottom:1px solid var(--line-soft)}
    .mobile-menu a .l-zh{font-family:var(--serif-zh);font-size:.9rem;color:var(--muted);margin-left:.5rem}
    .mobile-menu .btn{margin-top:1.5rem}
    .menu-backdrop{position:fixed;inset:0;background:rgba(42,37,33,.4);z-index:70;opacity:0;pointer-events:none;transition:.3s}
    .menu-backdrop{display:block}
    .menu-backdrop.show{opacity:1;pointer-events:auto}
    .menu-toggle.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
    .menu-toggle.x span:nth-child(2){opacity:0}
    .menu-toggle.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
    /* fixed book btn */
    .mobile-book{
      display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;
      background:rgba(251,246,236,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line);
      padding:.7rem var(--pad);
    }
    .mobile-book a{display:block;width:100%}
    body{padding-bottom:68px}
  }
  @media (max-width:560px){
    .cat-grid{grid-template-columns:1fr;gap:1.6rem}
    .sec-head{flex-direction:column;align-items:flex-start;gap:1rem}
    .foot-top{grid-template-columns:1fr}
    .foot-brand{grid-column:auto}
    .hero-cta,.closing .cta{align-items:stretch}
    .hero-cta .btn,.closing .btn{width:100%}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important;scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
  }