:root{--bg:#0b0e12;--panel:#141a20;--text:#e8eef4;--muted:#9fb0c3;--card:#11161b;--accent:#80aaff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;position:sticky;top:0;background:rgba(11,14,18,.8);backdrop-filter:blur(6px);border-bottom:1px solid #1d2630}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none}
.brand img{width:28px;height:28px;border-radius:10px;box-shadow:0 0 0 2px #3b4a5c inset}
.brand-text strong{display:block;font-weight:700}.brand-text span{display:block;color:var(--muted);font-size:12px;margin-top:-6px}
.nav{display:flex;gap:8px}.btn{padding:8px 12px;border-radius:10px;border:1px solid #2a3542;background:#0e141a;color:var(--text);text-decoration:none}
.btn:hover{border-color:#3d4d61}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;margin-top:24px}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{background:var(--card);padding:18px;border-radius:14px;border:1px solid #1e2732}
.card a{color:var(--text);text-decoration:none;display:block}
h1{font-size:40px;margin:0 0 6px}h2{margin:16px 0 8px}footer{border-top:1px solid #1d2630;margin-top:40px;padding:18px;color:var(--muted);text-align:center}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.gallery img{width:100%;height:160px;object-fit:cover;border-radius:10px}
.timeline-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.month-card{background:var(--card);border:1px solid #1e2732;border-radius:12px;padding:14px}.month-card:hover{border-color:#3d4d61}
.month-section{margin:26px 0;padding:14px;border-left:3px solid var(--accent);background:#0f141a;border-radius:8px}.small{color:var(--muted);font-size:13px}
.dark-link{color:#ffb37a;text-decoration:underline}
img.hero-img{width:100%;height:auto;border-radius:14px;border:1px solid #222c38;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.signout{color:#a7b8cc}
/* v7 updates */
.hero-hero {position: relative; margin: 0 auto; max-width: 1200px;}
.hero-hero img {width: 100%; height: auto; border-radius: 16px; border:1px solid #1e2732; box-shadow: 0 20px 60px rgba(0,0,0,.35);}
.hero-overlay {position: absolute; top: 18px; left: 18px; background: rgba(11,14,18,.65); backdrop-filter: blur(4px);
  padding: 16px 18px; border-radius: 12px; border: 1px solid #243242;}
.hero-overlay h1 {margin:0; font-size: 32px;}
.hero-overlay p {margin:4px 0 0; color: var(--muted);}
.center-row {display:flex; justify-content:center; margin-top:18px;}
.btn.cta {background:#0e141a; border-color:#3d4d61;}
.feed .post {background: var(--card); border:1px solid #1e2732; border-radius:12px; padding:16px; margin-bottom:16px;}
.feed .post img {width:100%; height:auto; border-radius:10px; margin-top:8px;}
.feed .more {margin-top:8px}
.gallery-wrap{max-width:1000px;margin:0 auto;padding:16px}
.viewer{position:relative;display:flex;align-items:center;justify-content:center;background:#0f141a;border:1px solid #1e2732;border-radius:12px;padding:8px}
.viewer img{max-width:100%;max-height:72vh;border-radius:8px}
.viewer button{position:absolute;top:50%;transform:translateY(-50%);padding:10px 14px;border-radius:10px;border:1px solid #2a3542;background:#0e141a;color:#fff}
.viewer .prev{left:10px}.viewer .next{right:10px}

/* v8 responsive upgrades */
:root { --wrap-pad: 16px; }
.wrap { padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); }
.brand img { width: 32px; height: 32px; }

/* Make hero image cover its box while preserving rounded corners */
.hero-hero { position: relative; margin: 0 auto; max-width: 1100px; }
.hero-hero .media { width: 100%; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; border:1px solid #1e2732; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.hero-hero .media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Overlay adjusts on small screens */
.hero-overlay { position: absolute; top: 14px; left: 14px; background: rgba(11,14,18,.65); backdrop-filter: blur(4px);
  padding: 12px 14px; border-radius: 12px; border: 1px solid #243242; max-width: 85%; }
.hero-overlay h1 { margin:0; font-size: 28px; line-height: 1.2; }
.hero-overlay p { margin:4px 0 0; color: var(--muted); font-size: 14px; }

/* Feed images scale and never overflow */
.feed .post img { width: 100%; height: auto; max-height: 60vh; object-fit: cover; }

/* Gallery scales */
.gallery-wrap { padding: 0 var(--wrap-pad) 24px; }
.viewer { padding: 6px; }
.viewer img { width: 100%; height: auto; max-height: 70vh; }
.viewer button { padding: 12px 14px; font-size: 18px; }

/* Header nav wraps on small screens */
@media (max-width: 720px) {
  header { padding: 8px 12px; }
  .brand-text strong { font-size: 16px; }
  .brand-text span { font-size: 12px; }
  .nav .btn { padding: 6px 10px; margin-left: 6px; }
  .hero-overlay { top: 10px; left: 10px; padding: 10px 12px; }
  .hero-overlay h1 { font-size: 22px; }
  .hero-overlay p { font-size: 13px; }
}

/* Very small devices */
@media (max-width: 420px) {
  .hero-hero { max-width: 100%; }
  .hero-overlay { max-width: calc(100% - 20px); }
  .center-row .btn { width: 100%; text-align: center; }
}

/* v9: stronger responsive baseline */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

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

/* Header layout is flexible and wraps on small screens */
header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; padding: 12px 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-text { display: flex; flex-direction: column; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; }

/* Global container */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Hero: maintain cover and safe overlay */
.hero-hero { position: relative; margin: 0 auto; width: 100%; max-width: 1120px; }
.hero-hero .media { width: 100%; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden;
  border: 1px solid #1e2732; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.hero-hero .media img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; top: 14px; left: 14px; background: rgba(11,14,18,.65);
  padding: 12px 14px; border-radius: 12px; border: 1px solid #243242; max-width: 88%; }
.hero-overlay h1 { margin: 0; font-size: 28px; line-height: 1.2; }
.hero-overlay p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.center-row { display:flex; justify-content:center; margin-top: 16px; }
.btn.cta { background:#0e141a; border-color:#3d4d61; }

/* Timeline feed: prevent overflow */
.feed .post { background: var(--card); border:1px solid #1e2732; border-radius:12px; padding:16px; margin-bottom:16px; }
.feed .post h2 { margin-top: 0; font-size: 22px; }
.feed .post img { width: 100%; height: auto; max-height: 60vh; object-fit: cover; border-radius: 10px; margin-top: 8px; }

/* Gallery */
.gallery-wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 16px 24px; }
.viewer { position: relative; display:flex; align-items:center; justify-content:center;
  background:#0f141a; border:1px solid #1e2732; border-radius:12px; padding: 6px; }
.viewer img { width: 100%; height: auto; max-height: 72vh; }
.viewer button { position:absolute; top:50%; transform:translateY(-50%);
  padding: 12px 14px; font-size: 18px; border-radius:10px; border:1px solid #2a3542; background:#0e141a; color:#fff; }
.viewer .prev { left: 8px; } .viewer .next { right: 8px; }

/* Small screens */
@media (max-width: 720px) {
  .hero-hero .media { aspect-ratio: 4/3; }
  .hero-overlay { top: 10px; left: 10px; padding: 10px 12px; }
  .hero-overlay h1 { font-size: 22px; }
  .hero-overlay p { font-size: 13px; }
  .feed .post h2 { font-size: 20px; }
  .nav .btn { padding: 6px 10px; }
}

/* Very small screens */
@media (max-width: 420px) {
  .wrap { padding: 0 12px; }
  .center-row .btn { width: 100%; text-align: center; }
  .viewer button { font-size: 20px; padding: 14px 16px; }
}

/* v11: timeline hardening */
.feed { width: 100%; max-width: 900px; margin: 0 auto; }
.feed .post { overflow: hidden; }
.feed .post * { max-width: 100%; }
.feed .post p, .feed .post h2, .feed .post div { overflow-wrap: anywhere; word-break: break-word; }
.feed .post img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; border-radius: 10px; }
.back-to-top { display:block; text-align:center; margin: 18px 0 8px; color:#9fb0c3; text-decoration:none; }
.back-to-top:hover { text-decoration: underline; }

/* buttons shouldn't force overflow */
.btn { white-space: nowrap; }
.nav { flex-wrap: wrap; }
@media (max-width: 480px) {
  .nav .btn { white-space: normal; }
}

/* Guard against accidental horizontal scroll */
html, body { overflow-x: hidden; }

/* v12: bulletproof responsive images on timeline */
.media-wide{width:100%; margin:8px 0 0; padding:0;}
.media-wide img{display:block; width:100%; max-width:100%; height:auto; border-radius:10px;}
@supports (aspect-ratio: 16 / 9){
  .media-wide.ratio-16x9{aspect-ratio:16/9; overflow:hidden;}
  .media-wide.ratio-16x9 img{width:100%; height:100%; object-fit:cover;}
}
/* Ensure no parent causes overflow */
.feed, .feed *{max-width:100%;}