/* library.css — the front door. Quiet, so the artwork does the talking. */
*{box-sizing:border-box}
body{
  margin:0; background:#FBF6EA; color:#2B2621;
  font-family:'Nunito',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  padding:0 18px calc(40px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;
}
header{max-width:760px;margin:0 auto;padding:46px 4px 26px;text-align:center}
.mark{
  font-size:12px;font-weight:800;letter-spacing:.30em;color:#C4622D;
  text-transform:uppercase;margin-bottom:14px;
}
header h1{
  font-family:'Baloo 2',system-ui,sans-serif;font-size:31px;font-weight:800;
  margin:0 0 6px;letter-spacing:.02em;
}
header p{margin:0;color:#7A7065;font-size:14px}

main{
  max-width:760px;margin:0 auto;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.trip{
  display:block;text-decoration:none;color:inherit;background:#fff;
  border-radius:18px;overflow:hidden;box-shadow:0 3px 14px rgba(80,60,30,.10);
  transition:transform .16s ease, box-shadow .16s ease;
}
.trip:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(80,60,30,.17)}
.trip .pic{height:168px;background-size:cover;background-position:center}
.trip .meta{padding:16px 18px 18px}
.trip .when{
  font-size:11px;font-weight:800;letter-spacing:.13em;color:#C4622D;
  text-transform:uppercase;margin-bottom:5px;
}
.trip h2{font-family:'Baloo 2',system-ui,sans-serif;font-size:20px;margin:0 0 2px;font-weight:800}
.trip .en{color:#6B6257;font-size:13px;margin-bottom:8px}
.trip .note{color:#8A8175;font-size:12.5px;line-height:1.5}

.trip.soon{opacity:.5;cursor:default;pointer-events:none}
.trip.soon .pic{filter:grayscale(.85)}

footer{max-width:760px;margin:44px auto 0;text-align:center;color:#9A9184}
footer p{margin:0 0 3px;font-size:14px}
footer .en{font-size:12.5px;opacity:.8}