/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

:root{
  --bg: #1c1e1f;
  --bg-2:#111213;
  --text:#e6e6e6;
  --muted:#cfd8dc;
  --edge:#2a2a2a;
  --shadow: 0 8px 22px rgba(0,0,0,.35);
  --radius: 8px;

  --content-max: 900px;   /* page width */
  --frame-max: 860px;     /* default image width */

  --fade: 1.2s;           /* crossfade duration */
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
}

.container{
  width:min(var(--content-max), 92vw);
  margin:0 auto;
  padding:0 4px;
}

.page-title{
  margin: 10px auto 6px;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 44px);
  color: #e9e9e9;
}

.page-subtitle{
  margin: 0 auto 8px;
  text-align:center;
  color:#d8d8d8;
  font-size: clamp(14px, 1.8vw, 18px);
}

.center-link{
  text-align:center;
  margin: 6px 0 10px;
}
.center-link a{
  color:#9fd1ff;
  text-decoration: underline;
}
.center-link a:hover{ color:#cfe8ff; }

.contact-text { text-align:center; }
.contact-text p { margin:10px 0; font-size:1.1rem; }
.contact-text .contact-big { font-size:1.4rem; font-weight:600; }



/* ---------- Header ---------- */
.site-header{
  background:var(--bg-2);
  border-bottom:1px solid var(--edge);
}

.header-inner{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:16px;
  align-items:center;
  padding:20px 0 14px;
}

.branding .brand{
  margin:0 0 4px 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight:700;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing:.2px;
  color:#f5f5f5;
}

.tagline{
  margin:0;
  font-size:.98rem;
  color:#c9c9c9;
}

/* ---------- Navigation ---------- */
.site-nav a{
  color:var(--muted);
  text-decoration:none;
  margin-left:18px;
  font-weight:600;
  font-size:.98rem;
  opacity:.95;
}

.site-nav a:hover,
.site-nav a.active{
  color:#fff;
  border-bottom:2px solid #ffffff33;
  padding-bottom:4px;
}


/* Banner Rotator: fixed height, no layout shift */
:root { --banner-ratio: 3 / 1; } /* width : height. Tweak (e.g., 21/9, 5/2) */

.banner-rotator{
  width:100%;
  max-width:var(--frame-max);
  margin:24px auto 8px;
  position:relative;
  aspect-ratio: var(--banner-ratio); /* stable height */
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.banner-rotator img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;            /* fill area, crop if needed */
  opacity:0;
  transition: opacity var(--fade) ease;
  display:block;
  background:#0f1011;
}

.banner-rotator img.active{ opacity:1; }


/* ---------- Content Frames ---------- */
.frame{
  width:100%;
  max-width:var(--frame-max);
  margin:22px auto;
  background:#0f1011;
  border:1px solid #00000066;
  border-radius: var(--radius);
  padding:10px;
  box-shadow: var(--shadow);
}

.frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
}

/* Owners card smaller */
.frame.small{
  max-width:560px;
}

/* Description panel slightly smaller */
.frame-desc{
  max-width:720px;
}


/* ---------- Footer ---------- */
.site-footer{
  margin-top:32px;
  background:var(--bg-2);
  border-top:1px solid var(--edge);
  color:#cfd8dc;
  padding:14px 0 24px;
}


/* ---------- Mobile ---------- */
@media (max-width: 720px){
  .header-inner{
    grid-template-columns: 1fr;
  }

  .site-nav{
    margin-top:6px;
  }

  .site-nav a{
    margin:0 12px 0 0;
    display:inline-block;
  }

  .frame{
    padding:8px;
  }
}