:root{
  --gap: 16px;
  --side-min: 260px;
  --mid-min: 380px;
  --wrap-max: 1200px;
}

body{
  margin:0;
  padding: 0 20px 20px;
  background: url('/images/railing.JPG') center / cover no-repeat;
  overflow-x: hidden;
}

p{
  font-family:'DotGothic16', sans-serif;
  font-size: 14px;
  line-height: 25px;
  color:#10011c;
  margin:0;
}

.header-box{
  position: relative;
  width: 100%;
  height: clamp(140px, 17.857vw, 360px);
  background: url('/images/flower-header.jpg') center / cover no-repeat;
  pointer-events: none; 
  z-index: 0;
}
@supports (aspect-ratio: 1 / 1){
  .header-box{ height:auto; aspect-ratio: 28 / 5; }
}

.image-gradient{
  position:absolute; 
  inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.15), rgba(255, 255, 255, 0.866));
  z-index:1;
}

.site-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
}

.site-name {
  margin: 0;
  font-family: 'Coral Pixels', cursive;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 5vw, 56px);
  color: #37012e;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.deco { height: clamp(18px, 3vw, 40px); width: auto; display: block; object-fit: contain; }
.deco-right { transform: scaleX(-1); }

.heading-text-container{
  position: relative;
  z-index:2;
  max-width: 1000px;
  padding-top: 80px;
  padding-left: 20%;
  display:flex;
  align-items: flex-end;   
  justify-content: flex-end; 
}

.header-image { width:70px; height:70px; display:block; object-fit:cover; }

.navbar{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  height: 47px;
  max-width: max-content;

  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding: 0px;
  background-color: transparent;
  font-size: 14px;
  line-height: 1;
  border: 6px double #e7bed0;
  border-radius: 15px;

  position: relative;
  overflow: visible;
  z-index: 0;                  
}

.nav-inner{ position: relative; z-index: 3; display: flex; align-items: center; gap: 80px; }
.decor { position: absolute; z-index: 2; padding-left: -200px; }
.decor-1 { height: 128px; top: -40px; left: -19px; width: 100px; }
.decor-2 { height: 128px; top: -40px; right: -19px; width: 100px; }

.nav-link{
  display: flex; align-items: center; justify-content: center;
  padding: 10px 20px; line-height: 1; height: 100%;
  text-decoration: none; font-family: 'DotGothic16', sans-serif;
  color: rgb(255, 254, 254);
  background-size: cover; background-repeat: no-repeat; background-position: center;
  line-height: 50px; 
  transition: transform 0.2s ease, color 0.2s ease;
}
.home-link  { background-image: url('/images/rock3.png');  background-size: 135%; padding-left: 25px; }
.media-link { background-image: url('/images/rock5.png');  background-size: 130%; padding-left: 25px; }
.blog-link  { background-image: url('/images/rock1.png');  background-size: 170%; }
.gallery-link{ background-image: url('/images/rock2.png');  background-size: 115%; padding-left: 25px; }
.about-link { background-image: url('/images/shell1.png'); background-size: 135%; }

.nav-link:hover { color: rgba(239, 195, 230, 0.864); transform: scale(1.10) rotate(-1deg); }

/* ------------------------------------------- */
:root{
  --win-bg: #e5e5e5;
  --title:  #501f3e;         
  --title-txt:#fff;
  --bevel-light:#fff;
  --bevel-dark:#666;
  --border:#2b2b2b;
}


.page-container{
  width: min(1000px, 100%);
  font-family:'DotGothic16', sans-serif;
  max-height: 105svh;
  margin: 3% auto;
  padding: 0;                
  border: 2px solid var(--border);
  box-sizing: border-box;
  overflow-y: scroll;         
  overflow-x: hidden;
  background: #dcdcdc;      
}

.titlebar{
  background: var(--title);
  color: var(--title-txt);
  height: 26px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 3px 6px;
  border-bottom: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.25), inset -1px -1px 0 rgba(0,0,0,.25);
}
.titlebar__left{
  display:flex; align-items:center; gap:8px;
}
.titlebar__text{ font-size:12px; letter-spacing:.3px; }
.titlebar__btns{ display:flex; gap:4px; }
.title-btn{
  width: 14px; height: 14px;
  background:#cfd8cf;
  border: 1px solid #0b2c1e;
  box-shadow: inset -1px -1px 0 #627e6f, inset 1px 1px 0 #fff;
  display:inline-block;
  cursor: pointer;
}
.title-btn:active{ filter: brightness(0.9); }

.menubar{
  background: #dcdcdc;
  border-bottom: 2px solid var(--border);
  padding: 4px 8px;
  display:flex; gap:16px;
  user-select:none; color:#111;
}
.menubar span{ cursor: default; }

.desktop{ padding: 12px; }

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:20px;
  width:100%;
  padding: 0 12px 12px;
  box-sizing: border-box;
}

.win{
  background:#dcdcdc;
  border: 2px solid var(--border);
  box-shadow: inset -1px -1px 0 var(--bevel-dark), inset 1px 1px 0 var(--bevel-light);
  display:flex; flex-direction:column;
  min-height: 200px; height: 250px;
}

.win__title{
  background: var(--title);
  color: var(--title-txt);
  padding: 4px 6px;
  align-items:center; justify-content: space-between; gap:6px;
  user-select:none;
  font-size: 14px;

  display: flex;
}

.win__title > span{
  flex: 1 1 auto;         
  min-width: 0;           
  white-space: nowrap;   
  overflow-x: auto;        
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; 
  padding-bottom: 2px;    
}
.win__title > span::-webkit-scrollbar{ height: 3px; }
.win__title > span::-webkit-scrollbar-track{ background: transparent; }
.win__title > span::-webkit-scrollbar-thumb{
  background: #bcbcbc;
  border-radius: 0px;
}

.win__btns{
  flex: 0 0 auto;       
  display: flex;
  gap: 4px;
}
.win__btns{ display:flex; gap:4px; }
.btn{
  width: 14px; height: 14px;
  background:#cfd8cf;
  border: 1px solid #0b2c1e;
  box-shadow: inset -1px -1px 0 #627e6f, inset 1px 1px 0 #fff;
  display:inline-block;
  cursor: pointer;

}
.page-container .win .win__btns .btn:nth-child(3),
.page-container .win .win__btns .btn:last-child{
  background-image: url('/images/expand.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%;    
}


.viewport{
  background:#fff;
  margin: 6px;
  border: 1px solid #9a9a9a;
  overflow: hidden;
}
.viewport img{ display:block; width: 100%; height: auto;}
.viewport video{
  display: block;
  width: 100%;
  height: auto;         
  max-width: 100%;
  object-fit: contain; 
}

.u{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.divider{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-family: 'DotGothic16', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  color: #111;


  letter-spacing: 0.12em;   /* try 0.05em–0.2em, or 1–3px */
}

.divider::before,
.divider::after{
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 2px solid var(--border); 
  border-bottom: 1px solid #ffffff;    
  opacity: .8;
}

@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
}