:root{
  --ink:#0f2532; --ink-soft:#36505f; --muted:#6b7f8b;
  --paper:#f7f5f0; --card:#ffffff; --line:#e3e0d8;
  --pine:#0d3b4f; --accent:#d98324; --accent-soft:#fdf1e2; --snow:#eef5f8;
  --radius:16px; --shadow:0 1px 2px rgba(15,37,50,.06), 0 12px 30px rgba(15,37,50,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(247,245,240,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:1.12rem}
.brand .peak{width:26px;height:26px}
.brand small{display:block;font-weight:500;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav a{padding:8px 12px;border-radius:999px;font-size:.92rem;color:var(--ink-soft)}
nav a:hover{background:#efece4;color:var(--ink)}
nav a.on{background:var(--pine);color:#fff}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0d3b4f 0%,#144b61 55%,#1c6079 100%);
  color:#fff;padding:64px 0 120px}
.hero .kicker{letter-spacing:.18em;text-transform:uppercase;font-size:.74rem;color:#9fc6d6}
.hero h1{font-size:clamp(2rem,4vw,3.1rem);line-height:1.1;margin:10px 0 14px;letter-spacing:-.02em;max-width:16ch}
.hero p{max-width:56ch;color:#cfe2ea;margin:0 0 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;font-weight:600;font-size:.95rem}
.btn.primary{background:var(--accent);color:#2a1602}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35)}
.hero .ridge{position:absolute;left:0;right:0;bottom:-2px;display:block;width:100%;height:auto}

/* sections */
section{padding:44px 0}
.head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.head h2{margin:0;font-size:1.5rem;letter-spacing:-.01em}
.head p{margin:0;color:var(--muted);font-size:.95rem}
.head .more{margin-left:auto;color:var(--accent);font-weight:600;font-size:.92rem}

/* cards */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(15,37,50,.12)}
.card .top{height:120px;background:linear-gradient(150deg,#12455a,#1f6d86);position:relative}
.card .top.v2{background:linear-gradient(150deg,#2c4a3a,#4b7a5e)}
.card .top.v3{background:linear-gradient(150deg,#4a3a2c,#8a6b45)}
.card .top.v4{background:linear-gradient(150deg,#3a2c4a,#6b5790)}
.card .alt{position:absolute;right:12px;bottom:10px;background:rgba(0,0,0,.42);color:#fff;
  font-size:.74rem;padding:4px 9px;border-radius:999px;letter-spacing:.02em}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font-size:1.06rem;letter-spacing:-.01em}
.card .where{margin:0;color:var(--muted);font-size:.88rem}
.card .meta{margin-top:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--ink-soft)}
.pill{background:var(--accent-soft);color:#8a4b06;border-radius:999px;padding:3px 10px;font-weight:600}
.pill.quiet{background:var(--snow);color:var(--pine)}

/* tiles */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.tile b{display:block;font-size:1.6rem;letter-spacing:-.02em}
.tile span{color:var(--muted);font-size:.86rem}

/* detail */
.detail{display:grid;gap:26px;grid-template-columns:1.6fr 1fr;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.panel h2{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
dl.rows{margin:0;display:grid;gap:10px}
dl.rows div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:8px}
dl.rows dt{color:var(--muted);font-size:.86rem;text-transform:uppercase;letter-spacing:.05em}
dl.rows dd{margin:0;font-weight:600}
ul.facilities{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
ul.facilities li{background:var(--snow);color:var(--pine);border-radius:999px;padding:5px 12px;font-size:.85rem}
.crumbs{font-size:.86rem;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--ink-soft)}
h1.title{font-size:clamp(1.7rem,3vw,2.4rem);margin:6px 0 6px;letter-spacing:-.02em}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filters a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:.88rem;color:var(--ink-soft)}
.filters a.on{background:var(--pine);border-color:var(--pine);color:#fff}

/* prose */
.prose{max-width:70ch}
.prose h3{margin:26px 0 6px}

/* note banner */
.note{background:var(--accent-soft);border:1px solid #f0d9b8;color:#6d3a06;border-radius:14px;
  padding:14px 18px;font-size:.92rem;margin:26px 0}
.note b{color:#5a2f04}

footer{border-top:1px solid var(--line);margin-top:30px;padding:34px 0;color:var(--muted);font-size:.88rem}
footer .row{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer nav{margin-left:auto}
footer nav a{color:var(--muted)}

@media(max-width:820px){
  .detail{grid-template-columns:1fr}
  .hero{padding:44px 0 96px}
  .bar{height:auto;padding:12px 0;flex-wrap:wrap}
  nav{margin-left:0;width:100%;overflow:auto}
}