@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Cinzel:wght@400;600;700&display=swap');

:root{
--ocean-primary:#00b4ff;
--ocean-secondary:#0066ff;
--ocean-deep:#021b35;
--ocean-surface:#062b52;
--ocean-glow:#7be7ff;
--ocean-text:#eafcff;
--ocean-muted:#9fd8e8;
--ocean-border:rgba(123,231,255,.25);
--ocean-card:rgba(6,32,60,.78);
--ocean-card-2:rgba(3,20,38,.92);
--ocean-shadow:0 0 24px rgba(0,180,255,.18);
--site-width:1180px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
font-size:15px;
line-height:1.8;
color:var(--ocean-text);
background:
radial-gradient(circle at top left,rgba(0,180,255,.18),transparent 28%),
radial-gradient(circle at top right,rgba(123,231,255,.14),transparent 30%),
linear-gradient(180deg,#010b16 0%,#021b35 38%,#041f3d 70%,#010f20 100%);
background-attachment:fixed;
overflow-x:hidden;
position:relative;
}

/* OCEAN WAVES */
body:before{
content:"";
position:fixed;
inset:0;
z-index:-2;
background:
radial-gradient(circle at 20% 20%,rgba(255,255,255,.08) 0%,transparent 10%),
radial-gradient(circle at 80% 30%,rgba(0,180,255,.08) 0%,transparent 14%),
radial-gradient(circle at 60% 80%,rgba(123,231,255,.06) 0%,transparent 12%);
animation:oceanFloat 14s linear infinite alternate;
pointer-events:none;
}

body:after{
content:"";
position:fixed;
left:0;
right:0;
bottom:0;
height:260px;
background:
linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='240' viewBox='0 0 1600 240'%3E%3Cpath fill='%2300b4ff22' d='M0,96L48,117.3C96,139,192,181,288,186.7C384,192,480,160,576,149.3C672,139,768,149,864,154.7C960,160,1056,160,1152,144C1248,128,1344,96,1440,90.7C1536,85,1632,107,1728,128L1824,149.3L1920,171L1920,240L0,240Z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-size:cover;
opacity:.75;
pointer-events:none;
z-index:-1;
}

@keyframes oceanFloat{
from{transform:translateY(0) scale(1)}
to{transform:translateY(-20px) scale(1.05)}
}

/* GLOBAL */
a{
color:var(--ocean-glow);
text-decoration:none;
transition:.25s ease;
font-weight:700;
}

a:hover{
color:#fff;
text-shadow:0 0 10px rgba(123,231,255,.7);
}

img{
max-width:100%;
height:auto;
display:block;
}

.container,
.site,
.site-content,
.content-area{
width:min(var(--site-width),calc(100% - 24px));
margin:auto;
}

/* HEADER */
.branding-wrap{
position:relative;
margin:22px auto 0;
overflow:hidden;
border-radius:22px;
border:1px solid var(--ocean-border);
background:
linear-gradient(135deg,rgba(5,25,48,.94) 0%,rgba(0,102,255,.30) 50%,rgba(0,180,255,.25) 100%);
backdrop-filter:blur(8px);
box-shadow:
0 0 40px rgba(0,180,255,.18),
0 0 90px rgba(0,102,255,.10);
}

.branding-wrap:before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(0deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:36px 36px;
opacity:.4;
}

.branding-wrap:after{
content:"OCEAN • DEPTH • MYSTERY";
position:absolute;
right:24px;
bottom:8px;
font-family:'Cinzel',serif;
font-size:42px;
font-weight:700;
letter-spacing:5px;
color:rgba(255,255,255,.07);
pointer-events:none;
}

.branding-inner{
display:flex;
align-items:center;
justify-content:center;
padding:34px 24px;
position:relative;
z-index:2;
}

.site-title,
.site-title a{
font-family:'Cinzel',serif!important;
font-size:clamp(42px,7vw,92px)!important;
font-weight:700!important;
color:#fff!important;
line-height:1!important;
letter-spacing:3px!important;
text-transform:uppercase!important;
text-shadow:
0 0 12px rgba(123,231,255,.9),
0 0 34px rgba(0,180,255,.55);
}

.site-description{
display:none!important;
}

/* NAVIGATION */
.main-navigation{
margin-top:14px;
border-radius:18px;
overflow:hidden;
border:1px solid var(--ocean-border);
background:
linear-gradient(90deg,rgba(0,102,255,.55),rgba(0,180,255,.45),rgba(3,20,38,.95));
backdrop-filter:blur(10px);
box-shadow:var(--ocean-shadow);
}

.main-navigation ul{
display:flex;
flex-wrap:wrap;
list-style:none;
}

.main-navigation li{
position:relative;
}

.main-navigation a{
display:block;
padding:14px 18px;
font-size:13px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
color:#fff;
border-right:1px solid rgba(255,255,255,.08);
}

.main-navigation a:hover,
.main-navigation .current-menu-item>a{
background:rgba(255,255,255,.10);
}

/* ARTICLE */
.content-area{
margin-top:22px;
padding:24px;
border-radius:24px;
background:var(--ocean-card);
border:1px solid var(--ocean-border);
backdrop-filter:blur(10px);
box-shadow:
0 0 30px rgba(0,180,255,.14),
0 0 70px rgba(0,0,0,.28);
position:relative;
overflow:hidden;
}

.content-area:before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at top right,rgba(123,231,255,.08),transparent 26%),
radial-gradient(circle at bottom left,rgba(0,180,255,.10),transparent 24%);
pointer-events:none;
}

.entry-title{
font-family:'Cinzel',serif;
font-size:38px;
font-weight:700;
line-height:1.2;
margin-bottom:20px;
text-align:center;
color:#fff;
text-shadow:0 0 16px rgba(123,231,255,.5);
}

.entry-content{
position:relative;
z-index:2;
}

.entry-content p{
font-size:17px;
line-height:2;
color:var(--ocean-text);
margin-bottom:18px;
text-align:justify;
}

.entry-content h2{
position:relative;
margin:36px 0 20px;
padding:16px 20px;
border-radius:18px;
background:
linear-gradient(90deg,rgba(0,102,255,.45),rgba(0,180,255,.40));
border:1px solid var(--ocean-border);
font-family:'Cinzel',serif;
font-size:28px;
font-weight:700;
color:#fff;
text-align:center;
letter-spacing:2px;
overflow:hidden;
box-shadow:0 0 18px rgba(0,180,255,.15);
}

.entry-content h2:before{
content:"🌊";
margin-right:10px;
}

.entry-content h2:after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(120deg,transparent 0%,rgba(255,255,255,.14) 50%,transparent 100%);
transform:translateX(-100%);
animation:shineOcean 5s linear infinite;
}

@keyframes shineOcean{
100%{transform:translateX(100%)}
}

/* IMAGE */
.wp-caption,
figure{
margin:26px auto;
padding:12px;
border-radius:22px;
background:rgba(5,25,48,.88);
border:1px solid var(--ocean-border);
box-shadow:
0 0 18px rgba(123,231,255,.12),
0 0 40px rgba(0,0,0,.30);
overflow:hidden;
}

.wp-caption img,
figure img{
border-radius:16px;
}

.wp-caption-text,
figcaption{
margin-top:12px;
font-size:13px;
font-weight:700;
letter-spacing:1px;
text-align:center;
color:var(--ocean-glow);
text-transform:uppercase;
}

/* BUTTON */
button,
input[type=submit],
.read-more{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 18px;
border-radius:14px;
border:1px solid var(--ocean-border);
background:
linear-gradient(90deg,rgba(0,102,255,.8),rgba(0,180,255,.8));
color:#fff;
font-weight:800;
cursor:pointer;
box-shadow:0 0 18px rgba(0,180,255,.18);
transition:.25s ease;
}

button:hover,
input[type=submit]:hover,
.read-more:hover{
transform:translateY(-2px);
box-shadow:0 0 24px rgba(123,231,255,.34);
}

/* SIDEBAR */
.widget{
margin-bottom:18px;
padding:18px;
border-radius:20px;
background:var(--ocean-card-2);
border:1px solid var(--ocean-border);
backdrop-filter:blur(8px);
box-shadow:0 0 18px rgba(0,180,255,.08);
}

.widget-title,
.widget h2{
margin:-18px -18px 16px;
padding:14px 18px;
border-bottom:1px solid var(--ocean-border);
background:
linear-gradient(90deg,rgba(0,102,255,.55),rgba(0,180,255,.45));
font-family:'Cinzel',serif;
font-size:20px;
font-weight:700;
color:#fff;
text-transform:uppercase;
letter-spacing:2px;
}

/* VERTICAL MENU */
.verticalt-menu,
.verticalt-menut{
list-style:none;
border-radius:18px;
overflow:hidden;
background:rgba(3,20,38,.92);
border:1px solid var(--ocean-border);
}

.verticalt-menu li,
.verticalt-menut li{
border-bottom:1px solid rgba(255,255,255,.06);
}

.verticalt-menu li:last-child,
.verticalt-menut li:last-child{
border-bottom:0;
}

.verticalt-menu li a,
.verticalt-menut li a{
display:flex;
align-items:center;
gap:10px;
padding:12px 16px;
font-size:13px;
font-weight:700;
color:#dffcff;
transition:.25s ease;
}

.verticalt-menu li a:hover,
.verticalt-menut li a:hover{
padding-left:22px;
background:rgba(0,180,255,.12);
color:#fff;
}

/* COMMENTS */
#comments,
.comment-reply-title{
margin:0 0 16px;
padding:16px 20px;
border-radius:18px;
background:
linear-gradient(90deg,rgba(0,102,255,.55),rgba(0,180,255,.45));
font-family:'Cinzel',serif;
font-size:22px;
font-weight:700;
color:#fff;
text-transform:uppercase;
letter-spacing:2px;
text-align:center;
border:1px solid var(--ocean-border);
}

.commentlist{
list-style:none;
}

.comment-body{
margin-bottom:14px;
padding:18px;
border-radius:18px;
background:rgba(5,25,48,.85);
border:1px solid var(--ocean-border);
box-shadow:0 0 18px rgba(0,180,255,.08);
}

.comment-author{
font-weight:800;
color:#fff;
margin-bottom:10px;
}

.comment-content{
color:var(--ocean-text);
line-height:1.8;
}

.comment-reply-link{
display:inline-block;
margin-top:10px;
padding:8px 14px;
border-radius:12px;
background:rgba(0,180,255,.15);
border:1px solid var(--ocean-border);
color:#fff;
font-size:12px;
font-weight:800;
text-transform:uppercase;
}

/* FOOTER */
#footer{
position:relative;
margin-top:26px;
padding:30px 20px;
overflow:hidden;
border-top:1px solid var(--ocean-border);
background:
linear-gradient(180deg,rgba(0,102,255,.35),rgba(1,11,22,.98));
text-align:center;
}

#footer:before{
content:"";
position:absolute;
left:-10%;
right:-10%;
top:-80px;
height:180px;
background:
radial-gradient(circle,rgba(123,231,255,.16) 0%,transparent 60%);
animation:oceanGlow 10s infinite alternate;
pointer-events:none;
}

@keyframes oceanGlow{
from{transform:scale(1)}
to{transform:scale(1.15)}
}

.footer-links-cloud{
position:relative;
z-index:2;
line-height:2;
font-size:13px;
color:#fff;
}

.footer-links-cloud a{
color:var(--ocean-glow);
font-weight:800;
}

.footer-links-cloud a:hover{
color:#fff;
}

#footer .copyright{
position:relative;
z-index:2;
margin-top:18px;
font-size:12px;
color:var(--ocean-muted);
}

/* SPECIAL ARTICLE */
.ocean-article,
.thailand-article,
.liberty-article,
.everest-article{
position:relative;
overflow:hidden;
}

.ocean-article:before,
.thailand-article:before,
.liberty-article:before,
.everest-article:before{
content:"DEEP OCEAN";
position:absolute;
top:20px;
right:-12px;
font-family:'Cinzel',serif;
font-size:92px;
font-weight:700;
letter-spacing:6px;
color:rgba(255,255,255,.03);
pointer-events:none;
}

/* SCROLLBAR */
::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#021b35;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#00b4ff,#0066ff);
border-radius:20px;
}

/* RESPONSIVE */
@media(max-width:860px){

.main-navigation ul{
flex-direction:column;
}

.main-navigation a{
border-right:0;
border-bottom:1px solid rgba(255,255,255,.06);
}

.content-area{
padding:18px;
}

.entry-title{
font-size:30px;
}

.entry-content h2{
font-size:22px;
}

.branding-wrap:after{
font-size:26px;
right:10px;
bottom:4px;
}

.ocean-article:before,
.thailand-article:before,
.liberty-article:before,
.everest-article:before{
font-size:48px;
top:10px;
right:-6px;
}
}

@media(max-width:640px){

body{
font-size:14px;
}

.container,
.site,
.site-content,
.content-area{
width:min(var(--site-width),calc(100% - 14px));
}

.branding-inner{
padding:22px 14px;
}

.site-title,
.site-title a{
font-size:42px!important;
letter-spacing:2px!important;
}

.entry-title{
font-size:24px;
}

.entry-content p{
font-size:15px;
line-height:1.9;
text-align:left;
}

.entry-content h2{
font-size:18px;
padding:14px;
letter-spacing:1px;
}

.wp-caption,
figure{
padding:8px;
border-radius:16px;
}

.verticalt-menu li a,
.verticalt-menut li a{
font-size:12px;
padding:11px 14px;
}

#footer{
padding:24px 12px;
}
}