/* ============================================================
   純粹愛大海 Pure Love the Sea — 官方網站共用樣式
   B 方案：大圖沉浸 · 大地米色＋木棕 · 黑體編輯風 · 中英雙語
   ============================================================ */

:root{
  --sand:#F4EEE2; --sand-deep:#E7DCC8; --paper:#FBF8F1;
  --ink:#2A2620; --ink-soft:#6E665A; --ink-faint:#9C9385;
  --wood:#8A5A36; --wood-deep:#6B4222; --clay:#B07B4E; --cream:#F1E3CF;
  --line:rgba(42,38,32,0.15); --line-soft:rgba(42,38,32,0.08);
  --dark:#332A21;
  --sans:"Noto Sans TC","Noto Sans",system-ui,sans-serif;
  --serif:"Noto Serif TC","Georgia",serif;
  --grot:"Archivo","Noto Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --pad:clamp(24px,6vw,96px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* ---------- 通用 ---------- */
.eyebrow{font-family:var(--mono);font-size:clamp(11px,1vw,13px);letter-spacing:0.22em;
  text-transform:uppercase;color:var(--wood);}
.en{font-family:var(--grot);}
.wrap{padding-left:var(--pad);padding-right:var(--pad);}
.measure{max-width:760px;}
section{position:relative;}

/* ---------- 佔位圖 ---------- */
.ph{position:relative;background-color:var(--sand-deep);
  background-image:repeating-linear-gradient(-45deg,rgba(138,90,54,0.10) 0 2px,transparent 2px 12px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ph::after{content:"";position:absolute;inset:12px;border:1px solid rgba(138,90,54,0.26);}
.ph .tag{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:0.03em;
  color:var(--wood-deep);background:rgba(244,238,226,0.86);padding:8px 14px;text-align:center;
  max-width:80%;line-height:1.55;}
.ph .tag b{display:block;font-size:10px;font-weight:700;letter-spacing:0.14em;opacity:0.65;margin-bottom:3px;}
.ph--dark{background-color:#3a3026;
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 13px);}
.ph--dark .tag{background:rgba(40,33,24,0.6);color:rgba(255,248,238,0.85);}

/* ---------- 導覽列 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:18px var(--pad);transition:background .3s,box-shadow .3s,color .3s;}
.nav--over{color:var(--paper);}
.nav--solid{background:rgba(251,248,241,0.92);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line-soft);color:var(--ink);}
.nav .brand{display:flex;flex-direction:column;line-height:1.1;letter-spacing:0.06em;}
.nav .brand b{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:0.1em;}
.nav .brand small{font-family:var(--grot);font-size:9px;letter-spacing:0.34em;text-transform:uppercase;
  opacity:0.7;margin-top:4px;}
.nav .links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);}
.nav .links a{font-size:15px;letter-spacing:0.06em;position:relative;padding:4px 0;opacity:0.92;transition:opacity .2s;
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;}
.nav .links a small{font-family:var(--grot);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;opacity:0.7;line-height:1;}
.nav .links a:hover{opacity:1;}
.nav .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;}
.nav .book{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  border:1.5px solid currentColor;padding:9px 16px;transition:background .2s,color .2s;
  display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1;}
.nav .book small{font-size:9px;letter-spacing:0.16em;opacity:0.8;}
.nav--over .book:hover{background:var(--paper);color:var(--ink);}
.nav--solid .book{background:var(--wood);color:var(--paper);border-color:var(--wood);}
.nav--solid .book:hover{background:var(--wood-deep);border-color:var(--wood-deep);}
.nav .burger{display:none;}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero .bg{position:absolute;inset:0;}
.hero .bg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,22,16,0.42) 0%,rgba(28,22,16,0.04) 36%,rgba(28,22,16,0.7) 100%);}
.hero .phtag{position:absolute;top:84px;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:11px;letter-spacing:0.08em;color:rgba(255,248,238,0.75);border:1px solid rgba(255,248,238,0.35);
  padding:6px 12px;z-index:2;}
.hero .copy{position:relative;z-index:2;color:var(--paper);padding:0 var(--pad) clamp(56px,9vh,104px);width:100%;}
.hero .eyebrow{color:#E9C9A6;}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(52px,11vw,140px);line-height:0.92;letter-spacing:0.06em;margin:22px 0 0;}
.hero .lat{font-family:var(--grot);font-weight:600;font-size:clamp(15px,1.7vw,22px);letter-spacing:0.4em;
  text-transform:uppercase;margin-top:20px;opacity:0.94;}
.hero .tag{font-size:clamp(17px,2vw,24px);font-weight:300;margin-top:26px;max-width:640px;line-height:1.65;text-wrap:pretty;}
.hero .tag .e{display:block;font-family:var(--grot);font-size:0.72em;letter-spacing:0.02em;opacity:0.85;margin-top:8px;}
.hero .scroll{position:absolute;bottom:30px;right:var(--pad);font-family:var(--mono);font-size:11px;
  letter-spacing:0.14em;color:rgba(255,248,238,0.7);writing-mode:vertical-rl;z-index:2;}

/* ---------- 木棕理念帶 ---------- */
.band{background:var(--wood);color:var(--cream);padding:clamp(56px,9vw,104px) var(--pad);text-align:center;}
.band .eyebrow{color:#E9C9A6;}
.band p.lead{font-size:clamp(22px,3.2vw,36px);font-weight:300;line-height:1.6;letter-spacing:0.02em;
  margin:26px auto 0;max-width:980px;text-wrap:pretty;}
.band .en2{font-family:var(--grot);font-size:clamp(14px,1.3vw,17px);opacity:0.78;margin-top:24px;line-height:1.7;max-width:760px;margin-left:auto;margin-right:auto;}
.band--dark{background:var(--dark);color:var(--cream);}

/* ---------- 區段標題 ---------- */
.shead{text-align:center;padding:clamp(64px,9vw,110px) var(--pad) clamp(30px,4vw,52px);}
.shead h2{font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:0.03em;margin-top:14px;}
.shead .en{display:block;font-size:clamp(12px,1.2vw,15px);letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:14px;}
.shead p{font-size:clamp(15px,1.5vw,18px);color:var(--ink-soft);margin-top:18px;max-width:680px;
  margin-left:auto;margin-right:auto;line-height:1.7;text-wrap:pretty;}

/* ---------- 交錯圖文列 ---------- */
.rows{}
.row{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(420px,56vw,580px);}
.row .pic{min-height:clamp(320px,46vw,580px);}
.row .txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,82px);background:var(--paper);}
.row:nth-child(even) .txt{background:var(--sand);}
.row.rev .pic{order:2;}
.row .no{font-family:var(--grot);font-weight:700;font-size:14px;letter-spacing:0.18em;color:var(--wood);}
.row h3{font-size:clamp(34px,4.6vw,54px);font-weight:800;letter-spacing:0.03em;margin-top:12px;}
.row .ren{font-family:var(--grot);font-size:clamp(13px,1.3vw,16px);letter-spacing:0.22em;text-transform:uppercase;
  color:var(--clay);margin-top:10px;}
.row .desc{font-size:clamp(16px,1.7vw,20px);color:var(--ink-soft);margin-top:22px;line-height:1.7;text-wrap:pretty;}
.row .meta{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-top:18px;letter-spacing:0.03em;line-height:1.7;}
.row .more{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-family:var(--grot);font-size:14px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--wood-deep);border-bottom:1.5px solid var(--wood);
  padding-bottom:6px;width:fit-content;transition:gap .2s;}
.row .more:hover{gap:16px;}

/* ---------- 設施 chips / 清單 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.chips span{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--wood-deep);
  border:1px solid var(--line);padding:7px 12px;background:var(--paper);}

.featlist{list-style:none;display:grid;gap:14px;}
.featlist li{display:flex;gap:14px;font-size:clamp(15px,1.5vw,17px);line-height:1.6;color:var(--ink);align-items:baseline;}
.featlist li::before{content:"";flex:0 0 auto;width:7px;height:7px;background:var(--wood);
  transform:translateY(-1px);border-radius:1px;}
.featlist li small{color:var(--ink-faint);font-size:0.82em;}

/* ---------- CTA ---------- */
.cta{position:relative;min-height:clamp(360px,46vw,460px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:var(--pad);overflow:hidden;}
.cta .bg{position:absolute;inset:0;}
.cta .bg::before{content:"";position:absolute;inset:0;background:rgba(28,22,16,0.56);}
.cta>*{position:relative;z-index:2;color:var(--paper);}
.cta h2{font-size:clamp(34px,5.5vw,60px);font-weight:800;letter-spacing:0.04em;}
.cta .sub{font-family:var(--mono);font-size:clamp(12px,1.2vw,14px);letter-spacing:0.12em;margin-top:18px;opacity:0.85;}
.btn{display:inline-block;font-size:16px;letter-spacing:0.08em;padding:16px 42px;transition:transform .2s,background .2s;cursor:pointer;}
.btn--cream{background:var(--cream);color:var(--ink);margin-top:30px;}
.btn--cream:hover{transform:translateY(-2px);background:var(--paper);}
.btn--wood{background:var(--wood);color:var(--paper);}
.btn--wood:hover{background:var(--wood-deep);}

/* ---------- 頁尾 ---------- */
.footer{background:var(--dark);color:var(--cream);padding:clamp(56px,8vw,90px) var(--pad) 40px;}
.footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
.footer .brand b{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:0.1em;}
.footer .brand small{display:block;font-family:var(--grot);font-size:11px;letter-spacing:0.3em;
  text-transform:uppercase;opacity:0.6;margin-top:8px;}
.footer .brand p{font-size:15px;opacity:0.8;line-height:1.7;margin-top:20px;max-width:340px;}
.footer h4{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  opacity:0.6;margin-bottom:16px;}
.footer ul{list-style:none;display:grid;gap:10px;}
.footer ul a,.footer ul li{font-size:15px;opacity:0.85;line-height:1.5;}
.footer ul a:hover{opacity:1;text-decoration:underline;}
.footer .bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:clamp(40px,6vw,70px);padding-top:24px;border-top:1px solid rgba(241,227,207,0.18);
  font-family:var(--mono);font-size:11px;letter-spacing:0.06em;opacity:0.6;}

/* ---------- 內頁標頭（非首頁的頂部）---------- */
.pagehead{padding:clamp(120px,16vh,180px) var(--pad) clamp(40px,6vw,72px);
  background:var(--sand);border-bottom:1px solid var(--line);}
.pagehead h1{font-family:var(--serif);font-size:clamp(36px,6.5vw,78px);font-weight:600;letter-spacing:0.06em;margin-top:16px;}
.pagehead .lat{font-family:var(--grot);font-size:clamp(13px,1.3vw,16px);letter-spacing:0.3em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:16px;}
.pagehead p{font-size:clamp(16px,1.7vw,19px);color:var(--ink-soft);margin-top:22px;max-width:620px;line-height:1.7;text-wrap:pretty;}

/* ---------- 每晚均價表（首頁與房價頁共用）---------- */
.rate-strip{border:1px solid var(--line);background:var(--paper);}
.rate-note{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-align:center;
  padding:14px;background:var(--sand-deep);color:var(--wood-deep);border-bottom:1px solid var(--line);}
.rate-note b{color:var(--wood-deep);}
.rate-grid{display:grid;grid-template-columns:repeat(5,1fr);}
.rate-card{padding:30px 18px 26px;text-align:center;border-right:1px solid var(--line-soft);position:relative;}
.rate-card:last-child{border-right:none;}
.rate-card--save{background:linear-gradient(180deg,rgba(138,90,54,0.04),rgba(138,90,54,0.09));}
.rc-nights{font-size:16px;font-weight:700;letter-spacing:0.02em;}
.rc-nights small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:400;margin-top:4px;}
.rc-price{margin-top:18px;line-height:1;}
.rc-price .cur{display:block;font-size:11px;color:var(--ink-soft);letter-spacing:0.04em;margin-bottom:6px;}
.rc-price b{font-family:var(--grot);font-weight:800;font-size:clamp(28px,3.4vw,40px);letter-spacing:0;}
.rc-per{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:8px;}
.rc-sub{font-size:12px;color:var(--ink-soft);margin-top:14px;}
.rc-tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:0.04em;
  color:var(--paper);background:var(--wood);padding:5px 11px;}
.rc-tag--ghost{background:transparent;color:var(--ink-faint);border:1px solid var(--line);}
@media(max-width:760px){
  .rate-grid{grid-template-columns:1fr 1fr;}
  .rate-card{border-bottom:1px solid var(--line-soft);}
}
@media(max-width:460px){ .rate-grid{grid-template-columns:1fr;} }

/* ---------- 響應式 ---------- */
@media(max-width:860px){
  .row{grid-template-columns:1fr;}
  .row.rev .pic{order:0;}
  .row .pic{min-height:clamp(260px,60vw,420px);}
  .row .txt{padding:clamp(32px,8vw,56px) clamp(24px,6vw,48px);}

  /* 手機上每個房間之間加明顯分隔，避免跨區誤讀 */
  .rows .row + .row{border-top:4px solid var(--sand-deep);}
  /* 文字區塊底部多一點空間，讓讀者清楚一間已結束 */
  .rows .row .txt{padding-bottom:clamp(40px,10vw,64px);}
  /* 照片上方顯示房號標籤，讓讀者一看就知道這是哪間的照片 */
  .rows .row .pic{position:relative;}
  .rows .row .pic::before{
    content:attr(data-label);
    position:absolute;top:0;left:0;z-index:3;
    font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--paper);background:rgba(42,38,32,0.55);
    padding:8px 14px;pointer-events:none;
  }

  .footer .top{grid-template-columns:1fr;gap:32px;}
  .nav .links{display:none;}
  .nav .burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;}
  .nav .burger span{width:24px;height:2px;background:currentColor;display:block;}
  .hero h1{letter-spacing:0.04em;}
  .hero .tag{font-size:clamp(16px,4.5vw,22px);}
  .band p.lead{font-size:clamp(18px,5vw,28px);}
  .shead h2{font-size:clamp(28px,7.5vw,48px);}
  .cta h2{font-size:clamp(28px,7.5vw,50px);}
}