/* Retro 1999 aesthetic inspired by the provided mockup */
:root{
  --blue-bg:#2e86a0;
  --panel:#f2e3b0;
  --border:#2c5770;
  --yellow:#ffe04d;
}
html,body{margin:0;padding:0}
body.retro-bg{background: radial-gradient(circle at 20% 20%, #3aa0be, #0d5670) fixed; color:#111;}
*{box-sizing:border-box}

.browser-frame{max-width:980px;margin:10px auto}
.browser-bar{display:none}
.browser-bar .traffic-lights{width:48px;height:12px;background:linear-gradient(90deg,#ff5f56 33%,#ffbd2e 33% 66%,#27c93f 66%);border-radius:10px}
.browser-bar .address{flex:1;background:#fff;border:1px solid #aab; padding:4px 10px;border-radius:8px;text-align:center;font-weight:bold}

.page-wrap{padding:10px}
.banner.free-hosting{max-width:520px;margin:0 auto 8px auto;background:linear-gradient(180deg,#ff7,#f6c);padding:6px 12px;border:4px ridge #d0a;color:#113;text-align:center;font-weight:900;letter-spacing:1px}
.rainbow{background:linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #000)}
.title.big{font-size:36px;text-align:center;margin:8px auto;border:6px ridge #b7a; padding:8px 12px;background:linear-gradient(180deg,#3ec,#f7f);-webkit-background-clip:initial;color:#002;border-radius:4px}

.layout{display:grid;grid-template-columns:200px 1fr 220px;gap:12px}
.left-rail,.right-rail{background:#167796;padding:10px;border:4px ridge #1a4e63}
.btn{display:block;text-decoration:none;color:#fff;text-align:center;padding:12px;margin:10px 0;border-radius:10px;border:3px outset #544}
.btn.rainbow{background:linear-gradient(180deg,#0ff,#f0f)}
.btn.small{padding:6px 10px;font-size:12px}
.input{padding:6px 8px;border:2px inset #666;border-radius:2px}
.input.retro{background:#eef}

.under-construction{background:#114a63;border:3px ridge #000;color:#ffde00;margin:16px 0}
.uc-top,.uc-bot{text-align:center;font-weight:900;padding:8px;background:repeating-linear-gradient(45deg,#ffc400 0 10px,#333 10px 20px)}
.uc-bot{background:repeating-linear-gradient(45deg,#333 0 10px,#ffc400 10px 20px); color:#fff}

.counter-box{background:#d7dede;margin:16px 0;border:3px groove #6b7c86;padding:8px}
.counter-box .label{font-weight:bold;margin-bottom:6px}
.digits{font-family: 'Courier New', monospace; font-size:22px;background:#333;color:#e3f4ff;padding:6px 8px;border:4px inset #222;letter-spacing:4px}

.content .panel{background:var(--panel);border:6px ridge var(--border);box-shadow:0 0 0 4px #c06 inset}
.panel{margin-bottom:14px}
.panel-header{font-weight:900;padding:8px 10px;border-bottom:3px groove #7b6}
.panel-header .icon-char{display:inline-block;margin-right:6px;font-weight:900;text-shadow:0 1px 0 #000}
.panel-header.yellow{background:linear-gradient(180deg,#fff59e,#ffb74d);color:#212}
.panel-body{padding:10px}
.callout{font-size:18px;margin:4px 0 8px 0}
.play-icon{display:inline-block;margin-left:6px;cursor:pointer;border:2px outset #444;padding:2px 6px;border-radius:4px;background:#e6e6e6;color:#111;font-weight:900}
.play-icon:active{border-style:inset}
.rainbow-inline{background:linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);-webkit-background-clip:text;background-clip:text;color:transparent}
.divider{border:0;height:4px;background:linear-gradient(90deg,#07c,#cd2,#f5a,#07c)}

.media-and-newsletter{display:grid;grid-template-columns:1fr 220px;gap:10px;align-items:start}
.newsletter .panel.small{margin-bottom:8px}
.sample-photo{width:220px;height:160px;background:url('../img/sample.jpg'), linear-gradient(180deg,#b8c,#8ac);background-size:cover;border:4px ridge #666}
.portrait{width:220px;height:220px;object-fit:cover;border:6px ridge #666;box-shadow:0 0 0 4px #c06 inset}

.roadmap .retro-list, .articles .retro-list{list-style:square;padding-left:18px}
.link{color:#113}
.rainbow-text{background:linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);-webkit-background-clip:text;background-clip:text;color:transparent}

.right-rail .ad{background:#fff5b1;border:6px ridge #b58b00;margin-bottom:14px;padding:10px}
.right-rail .ad .ad-title{font-weight:900;font-size:20px;text-align:center}
.ad.yellow{background:linear-gradient(180deg,#fff59e,#ffd54f)}
.ad.small .ad-title{font-size:16px}
.ad-close{margin-top:8px}

marquee.marquee{display:block;margin-top:8px;padding:8px;border:6px ridge #b7a;background:linear-gradient(90deg,#ff0,#0ff,#f0f)}

.blink{animation:blink 1.1s steps(2, start) infinite}
@keyframes blink{to{visibility:hidden}}

.admin .admin-wrap{max-width:860px;margin:20px auto;background:#d8e7ef;border:6px ridge #23576e;padding:12px}
.error{color:#900;font-weight:bold}
/* Feed styles for Postari */
.post-card{margin-bottom:16px}
.media-grid{display:grid;grid-template-columns:1fr;gap:8px}
.feed-img{width:100%;height:auto;border:4px ridge #666;object-fit:cover}
.feed-img.portrait{aspect-ratio:3/4}
.feed-img.landscape{aspect-ratio:16/9}
.feed-video{width:100%;border:4px ridge #666}

@media (max-width: 980px){
  .layout{grid-template-columns: 1fr;}
  .right-rail{order:3}
  .left-rail{order:1}
  .content{order:2}
}

/* Phone-friendly adjustments */
@media (max-width: 680px){
  .page-wrap{padding:6px}
  .title.big{font-size:clamp(22px,7vw,28px)}
  .banner.free-hosting{font-size:14px;padding:6px 8px}
  .btn{padding:10px;font-size:14px}
  .panel-body{padding:8px}
  .media-and-newsletter{grid-template-columns:1fr}
  .sample-photo{width:100%;height:auto;aspect-ratio:4/3}
  .portrait{width:100%;height:auto;aspect-ratio:1/1}
  .digits{font-size:18px;letter-spacing:2px}
  marquee.marquee{width:100%;overflow:hidden;white-space:nowrap;font-size:14px}
  .left-rail,.right-rail{padding:8px}
  .input{width:100%}
}

@media (max-width: 420px){
  .title.big{font-size:clamp(18px,8.5vw,24px)}
  .panel-header{font-size:16px}
  .btn.small{padding:8px 10px;font-size:12px}
  .counter-box .label{font-size:14px}
}

/* Retro timeline styling */
.timeline{position:relative;margin:10px 0;padding-left:20px}
.timeline:before{content:'';position:absolute;left:10px;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#07c,#cd2,#f5a,#07c);border:2px inset #245}
.timeline-item{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:start;margin-bottom:12px}
.timeline-year{font-weight:900;text-align:center;border:4px ridge #6a3;padding:6px 10px;background:linear-gradient(180deg,#3ec,#f7f);color:#001;border-radius:6px}
.timeline-card{background:var(--panel);border:6px ridge var(--border);box-shadow:0 0 0 4px #c06 inset}
.timeline-content{padding:10px}
@media (max-width:680px){
  .timeline-item{grid-template-columns:1fr}
  .timeline:before{left:0}
}