/* ===========================
   TERRA’S BYTES
   Curated chaos. 70s mod. 90s web bones.
   Things. Places. People. Food.
   =========================== */

:root{
  /* ===== PALETTE ===== */
  --bg: #f8f6f2;
  --text: #261302;

  --avocado: #6b8e2e;
  --orange:  #fe7638;
  --mustard: #edbb64;
  --cobalt:  #004a7b;

  /* ===== WOOD TILE BACKGROUND ===== */
  --tile-image: url("/images/bgpaneling2.png");
  --tile-size: 500px;

  /* ===== SURFACES ===== */
  --panel: rgba(255,255,255,.90);
  --paper: rgba(248,246,242,.95);

  --muted: rgba(38,19,2,.65);
  --line: rgba(38,19,2,.15);

  --radius: 18px;
  --max: 1040px;
}

/* ===========================
   Base
   =========================== */

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.65;

  background-color: var(--bg);
  background-image: var(--tile-image);
  background-repeat: repeat;
  background-size: var(--tile-size);
}

a{
  color: var(--cobalt);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,74,123,.35);
}

a:hover{
  color: var(--orange);
  border-bottom-color: rgba(254,118,56,.55);
}

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

/* ===========================
   Signal Strip (Sticky Marquee)
   Smooth avocado ↔ orange drift
   =========================== */

#signalStrip{
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: hidden;

  color: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,.15);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);

  background: linear-gradient(90deg, var(--avocado), var(--orange));
}

#signalStrip marquee{
  padding: 8px 0;
}

@media (prefers-reduced-motion: no-preference){
  #signalStrip{
    background: linear-gradient(90deg, var(--avocado), var(--orange), var(--avocado));
    background-size: 240% 100%;
    animation: stripDrift 18s ease-in-out infinite alternate;
  }

  @keyframes stripDrift{
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
}

/* ===========================
   Container
   =========================== */

#container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 14px 28px;
}

/* ===========================
   Sticky Header (Graphic)
   472x125 logo + 9px top/bottom breathing room
   =========================== */

#headerArea{
  position: sticky;
  top: 32px; /* sits below marquee */
  z-index: 90;
  margin-bottom: 14px;
}

#header{
  min-height: 125px;
  padding: 9px 0; /* breathing room */
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.logoLink{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border-bottom:none;
}

.logoImg{
  width: 472px;
  height: auto;
  max-width: 100%;
}

/* ===========================
   Navbar
   =========================== */

#navbar{
  margin-top: 10px;
  padding: 10px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

#navbar ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:center;
}

#navbar a{
  color: var(--text);
  border-bottom:none;
  font-weight: 750;
  padding: 8px 12px;
  border-radius: 999px;
}

#navbar a:hover{
  background: rgba(248,246,242,.75);
  color: var(--orange);
  transform: translateY(-1px);
}

#navbar a[aria-current="page"]{
  background: rgba(0,74,123,.12);
  border: 1px solid rgba(0,74,123,.25);
}

/* ===========================
   3 Column Layout
   =========================== */

#layout{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

/* Sidebars */

aside{
  width:230px;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
}

/* Main Content */

#content{
  flex:1 1 auto;
  min-width:0;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px 18px 14px;
}

/* ===========================
   Typography
   =========================== */

h1{
  margin:0 0 10px 0;
  font-size:26px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

h2{
  margin:18px 0 8px 0;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--cobalt);
}

aside h2{ margin-top:0; }

.lede{
  max-width:68ch;
  color: rgba(38,19,2,.85);
  margin:0 0 12px 0;
}

.fine{
  font-size:12px;
  letter-spacing:.05em;
  color: var(--muted);
}

/* ===========================
   Boxes / Panels
   =========================== */

.box{
  background: rgba(248,246,242,.80);
  border:1px solid rgba(38,19,2,.15);
  border-radius:14px;
  padding:10px 10px;
  margin:10px 0 14px;
}

.panel{
  background: rgba(248,246,242,.88);
  border:1px solid rgba(38,19,2,.15);
  border-radius:14px;
  padding:12px 12px;
  margin:12px 0 16px;
}

.kicker{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--mustard);
  margin-bottom:6px;
}

/* ===========================
   Buttons
   =========================== */

.btn{
  display:inline-block;
  margin-top:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--cobalt);
  color: var(--cobalt);
  background: rgba(248,246,242,.85);
  border-bottom:none;
  font-weight:750;
  letter-spacing:.05em;
}

.btn:hover{
  background: var(--cobalt);
  color: var(--bg);
}

/* ===========================
   Zonelets Recent Posts
   =========================== */

#recentpostlistdiv{
  margin-top:10px;
}

#recentpostlistdiv ul{
  list-style:none;
  padding:0;
  margin:0;
}

#recentpostlistdiv li{
  padding:10px 0;
  border-bottom:1px solid rgba(38,19,2,.15);
}

#recentpostlistdiv li:last-child{
  border-bottom:none;
}

#recentpostlistdiv .date{
  display:inline-block;
  margin-right:10px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(38,19,2,.15);
  background: rgba(248,246,242,.90);
  color: rgba(38,19,2,.75);
  font-size:12px;
}

/* ===========================
   Footer
   =========================== */

#footer{
  margin-top:14px;
  text-align:center;
  padding:12px 8px;
  background: var(--cobalt);
  color: var(--bg);
  border-radius:999px;
}

#footer a{
  color: var(--bg);
  border-bottom-color: rgba(255,255,255,.35);
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 980px){
  #layout{
    flex-direction:column;
  }

  aside{
    width:100%;
  }

  #navbar{
    border-radius: var(--radius);
  }

  #footer{
    border-radius: var(--radius);
  }

  #headerArea{
    top: 32px;
  }
}