:root{
    --green:#5A2740;        /* deep mulberry rose */
    --green-dark:#451D31;
    --paper:#FDF6F6;        /* blush paper white */
    --ink:#2A2026;
    --gilt:#C77E93;         /* rose gold */
    --seal:#B23A62;         /* seal red 印泥紅 */
    --stone:#9C8590;
    --rule:#EFD8DE;
    --display:'Cormorant Garamond','Noto Serif TC', Georgia, serif;
    --body:'Karla','Noto Sans TC','Helvetica Neue', Arial, sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation:none!important;transition:none!important;}
  }
  body{
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.75;
    font-size:17px;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}

  /* ---------- Language toggle ---------- */
  /* Default language: Traditional Chinese. body.en switches to English. */
  .en{display:none;}
  body.lang-en .en{display:revert;}
  body.lang-en .zh{display:none;}
  span.en{display:none;}
  body.lang-en span.en{display:inline;}

  .lang-btn{
    background:transparent;
    border:1px solid rgba(199,126,147,.6);
    color:var(--paper);
    font-family:var(--body);
    font-size:.8rem;
    letter-spacing:.1em;
    padding:.35rem .8rem;
    cursor:pointer;
  }
  .lang-btn:hover{border-color:var(--gilt);color:var(--gilt);}

  /* ---------- Header ---------- */
  header{
    background:var(--green);
    color:var(--paper);
    padding:.9rem 1.5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:.75rem;
    position:sticky;
    top:0;
    z-index:10;
    border-bottom:1px solid rgba(199,126,147,.45);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:.7rem;
    text-decoration:none;
  }
  .seal{
    background:var(--seal);
    color:#FDF0F3;
    font-family:'Noto Serif TC', serif;
    font-weight:600;
    width:2.3rem;
    height:2.3rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.95rem;
    line-height:1.1;
    letter-spacing:0;
    writing-mode:vertical-rl;
    border-radius:2px;
  }
  .brand-name{
    font-family:var(--display);
    font-size:1.2rem;
    font-weight:600;
    letter-spacing:.03em;
  }
  .nav-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;}
  nav a{
    text-decoration:none;
    font-size:.82rem;
    letter-spacing:.12em;
    margin-left:1.3rem;
    opacity:.85;
  }
  nav a:first-child{margin-left:0;}
  nav a:hover, nav a:focus-visible{opacity:1;border-bottom:1px solid var(--gilt);}
  a:focus-visible, button:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    color:var(--paper);
    padding:6.5rem 1.5rem 7rem;
    background:
      linear-gradient(rgba(69,29,49,.82), rgba(69,29,49,.88)),
      url('images/hero.jpg') center 35% / cover no-repeat;
  }
  .hero-frame{
    max-width:880px;
    margin:0 auto;
    border:1px solid rgba(199,126,147,.55);
    outline:1px solid rgba(199,126,147,.25);
    outline-offset:6px;
    padding:3.5rem 2rem;
    text-align:center;
  }
  .eyebrow{
    font-size:.8rem;
    letter-spacing:.2em;
    color:var(--gilt);
    margin-bottom:1.4rem;
  }
  .hero h1{
    font-family:var(--display);
    font-weight:500;
    font-size:clamp(2rem, 5.5vw, 3.4rem);
    line-height:1.25;
    margin-bottom:1.3rem;
  }
  .hero .sub{
    max-width:600px;
    margin:0 auto 2.2rem;
    opacity:.92;
  }
  .btn{
    display:inline-block;
    background:var(--gilt);
    color:var(--green-dark);
    text-decoration:none;
    font-weight:700;
    font-size:.9rem;
    letter-spacing:.1em;
    padding:.85rem 2rem;
    border:none;
    cursor:pointer;
    margin:.35rem;
  }
  .btn:hover{background:#D693A6;}
  .btn.ghost{
    background:transparent;
    color:var(--paper);
    border:1px solid rgba(253,246,246,.5);
  }
  .btn.ghost:hover{border-color:var(--gilt);color:var(--gilt);}
  .hero .langs{
    margin-top:2rem;
    font-size:.85rem;
    letter-spacing:.15em;
    color:rgba(253,246,246,.75);
  }

  /* ---------- Sections ---------- */
  section{padding:4.5rem 1.5rem;}
  .wrap{max-width:1000px;margin:0 auto;}
  .room-label{
    font-size:.78rem;
    letter-spacing:.2em;
    color:var(--stone);
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:.9rem;
  }
  .room-label::after{content:"";flex:1;height:1px;background:var(--rule);}
  h2{
    font-family:var(--display);
    font-weight:500;
    font-size:clamp(1.8rem, 3.5vw, 2.3rem);
    margin-bottom:1.4rem;
  }
  h3.sub-heading{
    font-family:var(--display);
    font-weight:600;
    font-size:1.35rem;
    margin:2.6rem 0 .4rem;
  }
  .lede{max-width:760px;color:#4C3A43;}

  /* ---------- About ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:2.5rem;
    align-items:start;
    margin-top:1.5rem;
  }
  .framed-photo{
    border:1px solid var(--gilt);
    outline:1px solid var(--rule);
    outline-offset:5px;
  }
  .framed-photo img{width:100%;}
  .photo-caption{
    font-size:.8rem;
    color:var(--stone);
    margin-top:.9rem;
    text-align:center;
  }
  blockquote{
    font-family:var(--display);
    font-size:1.3rem;
    line-height:1.7;
    border-left:3px solid var(--gilt);
    padding-left:1.3rem;
    margin:1.5rem 0 2rem;
    color:var(--green-dark);
  }
  ul.credentials{
    list-style:none;
    margin-top:.5rem;
  }
  ul.credentials li{
    padding:.65rem 0 .65rem 1.6rem;
    position:relative;
    border-bottom:1px dotted var(--rule);
    font-size:.97rem;
  }
  ul.credentials li::before{
    content:"——";
    position:absolute;
    left:0;
    color:var(--gilt);
    font-size:.8rem;
    top:.85rem;
  }

  /* ---------- Philosophy band ---------- */
  .philosophy{
    background:var(--green);
    color:var(--paper);
    text-align:center;
  }
  .philosophy p{
    font-family:var(--display);
    font-size:clamp(1.15rem, 2.4vw, 1.5rem);
    line-height:1.9;
    max-width:820px;
    margin:0 auto;
  }
  .philosophy .eyebrow{margin-bottom:1.8rem;}

  /* ---------- Tours ---------- */
  .tours-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:1.4rem;
    margin-top:1.4rem;
  }
  .tour{
    background:#fff;
    border:1px solid var(--rule);
    border-top:3px solid var(--green);
    padding:1.7rem 1.5rem;
    display:flex;
    flex-direction:column;
  }
  .tour .cat{
    font-size:.72rem;
    letter-spacing:.18em;
    color:var(--gilt);
    margin-bottom:.55rem;
    font-weight:700;
  }
  .tour h4{
    font-family:var(--display);
    font-weight:600;
    font-size:1.3rem;
    line-height:1.35;
    margin-bottom:.65rem;
  }
  .tour p{font-size:.93rem;color:#4C3A43;flex:1;}

  .tour-photo{
    margin:3rem auto 0;
    max-width:760px;
  }

  /* ---------- Pricing ---------- */
  .pricing{background:#F8E9EE;}
  .price-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:1.2rem;
    margin:1.8rem 0;
  }
  .price-card{
    background:#fff;
    border:1px solid var(--rule);
    text-align:center;
    padding:1.8rem 1rem 1.6rem;
  }
  .price-card .dur{
    font-size:.85rem;
    letter-spacing:.12em;
    color:var(--stone);
    margin-bottom:.4rem;
  }
  .price-card .amount{
    font-family:var(--display);
    font-size:2.2rem;
    font-weight:600;
    color:var(--green-dark);
  }
  .pill-note{
    background:#fff;
    border:1px solid var(--rule);
    border-left:3px solid var(--gilt);
    padding:1.1rem 1.3rem;
    font-size:.95rem;
    margin-bottom:2rem;
  }
  ul.includes{list-style:none;margin-top:.6rem;}
  ul.includes li{
    padding:.5rem 0 .5rem 1.6rem;
    position:relative;
    font-size:.97rem;
  }
  ul.includes li::before{
    content:"◆";
    position:absolute;left:0;
    color:var(--gilt);
    font-size:.7rem;
    top:.85rem;
  }

  /* ---------- Booking ---------- */
  .booking-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.5rem;
    margin-top:1.6rem;
  }
  .booking-block h3{
    font-family:var(--display);
    font-weight:600;
    font-size:1.25rem;
    margin-bottom:.7rem;
    padding-bottom:.5rem;
    border-bottom:1px solid var(--rule);
  }
  .booking-block ul{list-style:none;}
  .booking-block li{
    padding:.45rem 0 .45rem 1.5rem;
    position:relative;
    font-size:.95rem;
  }
  .booking-block li::before{
    content:"——";
    position:absolute;left:0;
    color:var(--gilt);
    font-size:.75rem;
    top:.6rem;
  }
  .booking-note{font-size:.9rem;color:var(--stone);margin-top:1rem;}

  /* ---------- Booking form ---------- */
  form.booking-form{
    background:#fff;
    border:1px solid var(--rule);
    border-top:3px solid var(--green);
    padding:1.8rem 1.6rem;
  }
  .field{margin-bottom:1.1rem;}
  .field label{
    display:block;
    font-size:.8rem;
    letter-spacing:.1em;
    color:var(--green-dark);
    font-weight:700;
    margin-bottom:.35rem;
  }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field select,
  .field textarea{
    width:100%;
    font-family:var(--body);
    font-size:.95rem;
    padding:.65rem .8rem;
    border:1px solid var(--rule);
    background:var(--paper);
    color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:2px solid var(--gilt);
    outline-offset:1px;
    border-color:var(--gilt);
  }
  .field textarea{min-height:100px;resize:vertical;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
  .agree{
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    font-size:.88rem;
    margin:1.2rem 0 1.4rem;
  }
  .agree input{margin-top:.3rem;accent-color:var(--green);}
  @media (max-width:560px){
    .field-row{grid-template-columns:1fr;}
  }

  /* ---------- Contact ---------- */
  .contact{background:var(--green);color:var(--paper);text-align:center;}
  .contact h2{color:var(--paper);}
  .contact .room-label{color:rgba(253,246,246,.6);justify-content:center;}
  .contact .room-label::after{display:none;}
  .contact-details{
    display:flex;
    justify-content:center;
    gap:2.5rem;
    flex-wrap:wrap;
    margin:2rem 0 2.5rem;
  }
  .contact-details > div{min-width:190px;}
  .contact-details .label{
    font-size:.72rem;
    letter-spacing:.2em;
    color:var(--gilt);
    margin-bottom:.35rem;
  }
  .contact-details a, .contact-details .val{
    font-family:var(--display);
    font-size:1.25rem;
    text-decoration:none;
    color:var(--paper);
  }
  .contact-details a:hover{color:var(--gilt);}
  .contact .fine{
    font-size:.85rem;
    color:rgba(253,246,246,.7);
    max-width:560px;
    margin:1.5rem auto 0;
  }

  footer{
    background:var(--green-dark);
    color:rgba(253,246,246,.55);
    text-align:center;
    font-size:.8rem;
    padding:1.5rem 1rem;
    line-height:1.7;
  }
  footer .seal{margin:0 auto .7rem;}

  /* ---------- Responsive ---------- */
  @media (max-width:820px){
    .about-grid, .booking-grid{grid-template-columns:1fr;}
    nav a{margin-left:.9rem;font-size:.78rem;}
    .hero{padding:4.5rem 1rem 5rem;}
    .hero-frame{padding:2.5rem 1.2rem;}
    section{padding:3.5rem 1.2rem;}
  }

/* ---------- Sub-page hero band ---------- */
.page-hero{
  background:var(--green);
  color:var(--paper);
  text-align:center;
  padding:4rem 1.5rem;
}
.page-hero h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2rem, 4.5vw, 3rem);
  margin-bottom:1rem;
}
.page-hero .sub{max-width:640px;margin:0 auto;opacity:.9;}

/* ---------- Photo pair ---------- */
.photo-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin-top:3rem;
  align-items:start;
}
@media (max-width:720px){
  .photo-pair{grid-template-columns:1fr;}
}

/* ---------- Essays (articles page) ---------- */
.essay{
  background:#fff;
  border:1px solid var(--rule);
  border-top:3px solid var(--green);
  margin-bottom:1.3rem;
}
.essay summary{
  cursor:pointer;
  list-style:none;
  padding:1.4rem 1.6rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.essay summary::-webkit-details-marker{display:none;}
.essay summary .t{
  font-family:var(--display);
  font-weight:600;
  font-size:1.25rem;
  line-height:1.4;
}
.essay summary .marker{
  color:var(--gilt);
  font-size:1.2rem;
  flex-shrink:0;
  transition:transform .2s;
}
.essay[open] summary .marker{transform:rotate(45deg);}
.essay summary:hover .t{color:var(--green-dark);}
.essay .essay-body{
  padding:0 1.6rem 1.8rem;
  border-top:1px dotted var(--rule);
}
.essay .essay-body p{
  margin-top:1.1rem;
  font-size:.97rem;
  color:#3D2E36;
  line-height:1.95;
}
.essay .kicker{
  font-size:.75rem;
  letter-spacing:.18em;
  color:var(--gilt);
  font-weight:700;
  margin-bottom:.3rem;
}
.essay .en-note{
  font-size:.88rem;
  color:var(--stone);
  font-style:italic;
}

/* ---------- Soft feminine touches ---------- */
.btn, .lang-btn{border-radius:999px;}
.tour, .price-card, .pill-note, form.booking-form, .essay{border-radius:12px; overflow:hidden;}
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field select, .field textarea{border-radius:8px;}
.seal{border-radius:6px;}


/* ---------- 纏枝紋 scrolling-vine background ---------- */
body{
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIiB2aWV3Qm94PSIwIDAgMjQwIDI0MCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSg5MCwzOSw2NCwwLjEwKSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CjxwYXRoIGQ9Ik0yOCA2NiBDNTYgMjIgMTA0IDI2IDExNCA2MCBDMTIxIDg2IDEwMCAxMDUgODAgOTcgQzY0IDkxIDYzIDcxIDc3IDY2IEM4NyA2MiA5NSA3MCA5MCA3OSIvPgo8cGF0aCBkPSJNMTE0IDYwIEMxMzggNTIgMTU4IDYyIDE2MCA4MiIvPgo8cGF0aCBkPSJNMjEyIDE3NCBDMTg0IDIxOCAxMzYgMjE0IDEyNiAxODAgQzExOSAxNTQgMTQwIDEzNSAxNjAgMTQzIEMxNzYgMTQ5IDE3NyAxNjkgMTYzIDE3NCBDMTUzIDE3OCAxNDUgMTcwIDE1MCAxNjEiLz4KPHBhdGggZD0iTTEyNiAxODAgQzEwMiAxODggODIgMTc4IDgwIDE1OCIvPgo8L2c+CjxnIGZpbGw9InJnYmEoOTAsMzksNjQsMC4wOCkiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik00NiA0MCBDMzYgMjYgNDYgMTIgNjIgMTYgQzYwIDMwIDU1IDM3IDQ2IDQwIFoiLz4KPHBhdGggZD0iTTg2IDMyIEM5NCAxOCAxMTAgMjAgMTE0IDMyIEMxMDIgMzggOTIgMzggODYgMzIgWiIvPgo8cGF0aCBkPSJNMTUwIDU2IEMxNjIgNDggMTc0IDU0IDE3NCA2NiBDMTYyIDY4IDE1NCA2NCAxNTAgNTYgWiIvPgo8cGF0aCBkPSJNMTk0IDIwMCBDMjA0IDIxNCAxOTQgMjI4IDE3OCAyMjQgQzE4MCAyMTAgMTg1IDIwMyAxOTQgMjAwIFoiLz4KPHBhdGggZD0iTTE1NCAyMDggQzE0NiAyMjIgMTMwIDIyMCAxMjYgMjA4IEMxMzggMjAyIDE0OCAyMDIgMTU0IDIwOCBaIi8+CjxwYXRoIGQ9Ik05MCAxODQgQzc4IDE5MiA2NiAxODYgNjYgMTc0IEM3OCAxNzIgODYgMTc2IDkwIDE4NCBaIi8+CjxjaXJjbGUgY3g9IjExNCIgY3k9IjYwIiByPSI0Ii8+CjxjaXJjbGUgY3g9IjEyNiIgY3k9IjE4MCIgcj0iNCIvPgo8Y2lyY2xlIGN4PSIxNjAiIGN5PSI4MiIgcj0iMi41Ii8+CjxjaXJjbGUgY3g9IjgwIiBjeT0iMTU4IiByPSIyLjUiLz4KPC9nPgo8L3N2Zz4=");
  background-size:240px 240px;
}
.philosophy, .contact, .page-hero{
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMjQwIiB2aWV3Qm94PSIwIDAgMjQwIDI0MCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTMsMjQ2LDI0NiwwLjA5KSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CjxwYXRoIGQ9Ik0yOCA2NiBDNTYgMjIgMTA0IDI2IDExNCA2MCBDMTIxIDg2IDEwMCAxMDUgODAgOTcgQzY0IDkxIDYzIDcxIDc3IDY2IEM4NyA2MiA5NSA3MCA5MCA3OSIvPgo8cGF0aCBkPSJNMTE0IDYwIEMxMzggNTIgMTU4IDYyIDE2MCA4MiIvPgo8cGF0aCBkPSJNMjEyIDE3NCBDMTg0IDIxOCAxMzYgMjE0IDEyNiAxODAgQzExOSAxNTQgMTQwIDEzNSAxNjAgMTQzIEMxNzYgMTQ5IDE3NyAxNjkgMTYzIDE3NCBDMTUzIDE3OCAxNDUgMTcwIDE1MCAxNjEiLz4KPHBhdGggZD0iTTEyNiAxODAgQzEwMiAxODggODIgMTc4IDgwIDE1OCIvPgo8L2c+CjxnIGZpbGw9InJnYmEoMjUzLDI0NiwyNDYsMC4wNykiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik00NiA0MCBDMzYgMjYgNDYgMTIgNjIgMTYgQzYwIDMwIDU1IDM3IDQ2IDQwIFoiLz4KPHBhdGggZD0iTTg2IDMyIEM5NCAxOCAxMTAgMjAgMTE0IDMyIEMxMDIgMzggOTIgMzggODYgMzIgWiIvPgo8cGF0aCBkPSJNMTUwIDU2IEMxNjIgNDggMTc0IDU0IDE3NCA2NiBDMTYyIDY4IDE1NCA2NCAxNTAgNTYgWiIvPgo8cGF0aCBkPSJNMTk0IDIwMCBDMjA0IDIxNCAxOTQgMjI4IDE3OCAyMjQgQzE4MCAyMTAgMTg1IDIwMyAxOTQgMjAwIFoiLz4KPHBhdGggZD0iTTE1NCAyMDggQzE0NiAyMjIgMTMwIDIyMCAxMjYgMjA4IEMxMzggMjAyIDE0OCAyMDIgMTU0IDIwOCBaIi8+CjxwYXRoIGQ9Ik05MCAxODQgQzc4IDE5MiA2NiAxODYgNjYgMTc0IEM3OCAxNzIgODYgMTc2IDkwIDE4NCBaIi8+CjxjaXJjbGUgY3g9IjExNCIgY3k9IjYwIiByPSI0Ii8+CjxjaXJjbGUgY3g9IjEyNiIgY3k9IjE4MCIgcj0iNCIvPgo8Y2lyY2xlIGN4PSIxNjAiIGN5PSI4MiIgcj0iMi41Ii8+CjxjaXJjbGUgY3g9IjgwIiBjeT0iMTU4IiByPSIyLjUiLz4KPC9nPgo8L3N2Zz4=");
  background-size:240px 240px;
}
/* keep readability: solid panels above the pattern */
.pricing{background-image:none;}

/* ---------- Articles page subtitle ---------- */
.page-hero .series-subtitle{
  font-family:var(--display);
  font-size:clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing:.25em;
  color:var(--gilt);
  margin:-.4rem 0 1.2rem;
}