:root {
  --site-deep:#102f45; --site-ocean:#087e87; --site-ocean-dark:#07545b;
  --site-ink:#183440; --site-muted:#65767e; --site-line:#dce9e8;
  --site-foam:#eaf7f6; --site-paper:#fff; --site-radius:18px;
  --site-shadow:0 8px 24px rgba(22,63,79,.08);
  --site-shadow-hover:0 18px 40px rgba(22,63,79,.14);
  --site-width:2200px;
}
html { overflow-x:clip; }
body { color:var(--site-ink); background:#f8fbfb; }
.main-content { width:100%; overflow-x:clip; }
.main-content > .container:not(.home-section),
.about-page .container,.media-detail.container,.travel-page .container {
  width:calc(100% - clamp(24px,4vw,96px)); max-width:var(--site-width); margin-right:auto; margin-left:auto;
}
.main-content > .container:not(.home-section) { padding-top:clamp(1.5rem,4vw,3.5rem); padding-bottom:clamp(2.5rem,6vw,5rem); }
.main-content h1,.main-content h2 { color:var(--site-deep); letter-spacing:-.025em; }
.main-content h1 { font-size:clamp(2rem,4.5vw,3.6rem); line-height:1.05; }
.main-content h2 { font-size:clamp(1.7rem,3.5vw,2.6rem); line-height:1.1; }
.main-content a { text-underline-offset:3px; }
.main-content .row.g-4 { --bs-gutter-x:1.25rem; --bs-gutter-y:1.25rem; }
.main-content .row.g-4 > [class*="col-"] { display:flex; }
.main-content .row.g-4 > [class*="col-"] > a { width:100%; }
.main-content .card { width:100%; overflow:hidden; border:1px solid var(--site-line)!important; border-radius:var(--site-radius)!important; background:var(--site-paper); box-shadow:var(--site-shadow)!important; transition:transform .22s,border-color .22s,box-shadow .22s; }
.main-content a:hover > .card,.main-content .card:hover { border-color:#8fc5c2!important; box-shadow:var(--site-shadow-hover)!important; transform:translateY(-3px); }
.main-content .card-img-top { width:100%; height:220px!important; object-fit:cover; }
.main-content .card-body { display:flex; flex-direction:column; padding:1.2rem; }
.main-content .card-title { margin:0 0 .6rem; color:var(--site-deep); font-size:1.25rem; line-height:1.2; }
.main-content .card-text { color:var(--site-muted); line-height:1.55; }
.main-content .text-muted { color:#71838b!important; }
.btn { border-radius:999px; font-weight:700; transition:transform .2s,background .2s,border-color .2s; }
.btn:hover { transform:translateY(-1px); }
.btn-primary,.btn-info { border-color:var(--site-ocean); background:var(--site-ocean); }
.btn-primary:hover,.btn-info:hover { border-color:var(--site-ocean-dark); background:var(--site-ocean-dark); }
.btn-outline-primary,.btn-outline-info { border-color:#8fc5c2; color:var(--site-ocean-dark); }
.btn-outline-primary:hover,.btn-outline-info:hover { border-color:var(--site-ocean); background:var(--site-ocean); color:#fff; }
.form-control,.form-select,.dropdown-menu { border-color:var(--site-line); border-radius:12px; }
.form-control:focus,.form-select:focus,.form-check-input:focus { border-color:#67aaa7; box-shadow:0 0 0 .2rem rgba(8,126,135,.13); }
.form-check-input:checked { border-color:var(--site-ocean); background-color:var(--site-ocean); }
.photo-navbar,.video-navbar { width:calc(100% - clamp(24px,4vw,96px)); max-width:var(--site-width); margin:1.5rem auto!important; padding:.85rem!important; border:1px solid var(--site-line); border-radius:16px; background:#12384d!important; box-shadow:var(--site-shadow); }
.photo-masonry,.video-masonry { width:calc(100% - clamp(24px,4vw,96px)); max-width:var(--site-width); margin-right:auto; margin-left:auto; }
.photo-wrapper,.video-wrapper { overflow:hidden; border:1px solid var(--site-line)!important; border-radius:14px!important; background:#fff; box-shadow:var(--site-shadow); }
.modal-info { border-color:rgba(255,255,255,.15)!important; border-radius:16px!important; background:rgba(7,30,43,.9)!important; backdrop-filter:blur(12px); }
.btn-modal,.btn-close-modal { border:1px solid rgba(255,255,255,.28)!important; border-radius:999px!important; background:rgba(9,77,84,.88)!important; color:#fff!important; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.btn-modal:hover,.btn-close-modal:hover { background:#0a8b93!important; transform:translateY(-1px); }
.pagination { flex-wrap:wrap; justify-content:center; gap:.35rem; margin:2rem 0; }
.page-link { min-width:42px; border:1px solid var(--site-line); border-radius:10px!important; color:var(--site-ocean-dark); text-align:center; }
.page-item.active .page-link { border-color:var(--site-ocean); background:var(--site-ocean); }
.table { overflow:hidden; border:1px solid var(--site-line); border-radius:var(--site-radius); background:#fff; box-shadow:var(--site-shadow); }
.table thead th { padding:1rem; border-bottom-color:var(--site-line); background:#edf8f7; color:var(--site-deep); }
.table tbody td { padding:1rem; border-color:#edf2f2; vertical-align:middle; }
.table-hover tbody tr:hover > * { background:#f0f9f8; }
.news-detail,.media-detail,.file-viewer-container { overflow:hidden; border:1px solid var(--site-line); border-radius:22px; background:#fff; box-shadow:var(--site-shadow); }
.news-detail { max-width:1100px; margin:0 auto; padding:clamp(1rem,3vw,2.5rem); }
.news-detail-header-image img,.block-photo img { border-radius:16px!important; }
.news-detail-content,.post-content-blocks { color:#334f5c; line-height:1.75; }
.travel-content-section,.travel-gallery-section,.bookshelf-container,.diary-card { border-color:var(--site-line)!important; border-radius:var(--site-radius)!important; box-shadow:var(--site-shadow); }
.masonry-grid { column-count:3; column-gap:1.25rem; }
.masonry-item { break-inside:avoid; margin-bottom:1.25rem; }
.masonry-grid .person-card { border:1px solid var(--site-line)!important; border-radius:var(--site-radius)!important; box-shadow:var(--site-shadow)!important; }
.empty-state { grid-column:1/-1; padding:3rem 1.5rem; border:1px dashed #aacdcc; border-radius:var(--site-radius); color:var(--site-muted); text-align:center; background:#f3f9f8; }
@media(max-width:767px){
  :root { --site-radius:14px; --site-shadow:0 5px 16px rgba(22,63,79,.08); }
  body { font-size:15px; }
  .main-content > .container:not(.home-section),
  .about-page .container,.media-detail.container,.travel-page .container {
    width:calc(100% - 24px); padding-top:1.25rem; padding-bottom:2.25rem;
  }
  .main-content h1 { font-size:clamp(1.85rem,9vw,2.45rem); overflow-wrap:anywhere; }
  .main-content h2 { font-size:clamp(1.5rem,7vw,2rem); overflow-wrap:anywhere; }
  .main-content .row.g-4 > [class*="col-"] { width:100%; }
  .main-content .card-img-top { height:205px!important; }
  .main-content .card-body { padding:1rem; }
  .photo-navbar,.video-navbar { width:calc(100% - 20px); margin:.75rem auto 1rem!important; padding:.65rem!important; border-radius:12px; }
  .photo-navbar form,.video-navbar form { align-items:stretch!important; }
  .photo-navbar .dropdown,.video-navbar .dropdown,.photo-navbar button,.video-navbar button,.photo-navbar select,.video-navbar select { width:100%!important; }
  .photo-navbar .dropdown-menu,.video-navbar .dropdown-menu { width:min(100%,calc(100vw - 36px)); max-height:55vh!important; overflow:auto; }
  .photo-masonry,.video-masonry { width:calc(100% - 20px); }
  .photo-masonry { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .video-masonry { grid-template-columns:1fr; gap:10px; }
  .modal-info { top:10px!important; right:52px!important; left:10px!important; width:auto!important; max-width:none!important; padding:.65rem .75rem!important; }
  .modal-info h4 { margin:0 0 .25rem!important; font-size:1rem!important; }
  .modal-inner { width:100%!important; padding:0 42px!important; box-sizing:border-box; }
  .btn-modal { width:40px!important; height:40px!important; min-width:40px!important; padding:0!important; }
  .btn-close-modal { top:10px!important; right:8px!important; width:38px!important; height:38px!important; }
  .modal-bottom-controls { bottom:max(12px,env(safe-area-inset-bottom))!important; }
  .table { display:block; overflow-x:auto; white-space:normal; }
  .masonry-grid { column-count:1; }
  .news-detail,.media-detail,.file-viewer-container { border-radius:14px; }
  .news-detail { padding:1rem; }
  .media-stage { min-height:190px; max-height:62vh; border-radius:14px; }
  .media-stage img,.media-stage video { max-height:62vh; }
  .media-actions { display:grid; grid-template-columns:1fr; }
  .travel-content-section { padding:1rem!important; margin-bottom:1rem!important; border-radius:14px!important; }
  .travel-map,#map { height:280px!important; min-height:280px!important; }
  .travel-gallery { height:230px!important; padding-inline:30px!important; }
  .swiper-button-next,.swiper-button-prev { transform:scale(.82); }
}
@media(min-width:768px) and (max-width:1099px){
  .main-content > .container:not(.home-section),
  .about-page .container,.media-detail.container,.travel-page .container,
  .photo-navbar,.video-navbar,.photo-masonry,.video-masonry { width:calc(100% - 32px); }
  .main-content .row.g-4 > [class*="col-md-4"] { width:50%; }
  .masonry-grid { column-count:2; }
  .travel-content-section { padding:1.35rem; }
}
@media(min-width:1100px) and (max-width:1899px){
  .main-content .row.g-4 > [class*="col-md-4"] { width:33.333333%; }
}
@media(min-width:1900px){
  .main-content .row.g-4 > [class*="col-md-4"] { width:25%; }
  .masonry-grid { column-count:4; }
}