/* ===========================
   DESERT STATIC — Zonelets CSS
   3-column layout + tiled bg + 150px header + marquee
   =========================== */

:root{
  /* swap these when you upload your own tile + header image */
  --tile-image: url("/assets/img/tile.png");        /* repeating background tile */
  --header-image: url("/assets/img/header.jpg");    /* 150px header image */

  --paper:#F7F1E8;
  --sand:#E7D8C9;
  --clay:#C97B63;
  --rust:#9A3E25;
  --teal:#2E5E5E;
  --ink:#1A1A1A;
  --muted: rgba(26,26,26,.72);
  --line: rgba(26,26,26,.12);

  --panel: rgba(247,241,232,.90);
  --card: rgba(231,216,201,.70);

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

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

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

  /* TILED BACKGROUND */
  background-color: var(--paper);
  background-image: var(--tile-image);
  background-repeat: repeat;
  background-size: 160px; /* adjust this to scale your tile */
}

/* ===== SIGNAL STRIP ===== */

#signalStrip{
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(
    90deg,
    rgba(26,26,26,.95),
    rgba(26,26,26,.88)
  );
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

#signalStrip marquee{
  padding: 8px 0;
}
@media (prefers-reduced-motion: no-preference){
  #signalStrip{
    animation: signalPulse 12s ease-in-out infinite;
  }

  @keyframes signalPulse{
    0%,100%{ background-color: rgba(26,26,26,.92); }
    50%{ background-color: rgba(20,20,20,.96); }
  }
}
/* CONTAINER */
#container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 14px 28px;
}

/* HEADER AREA */
#headerArea{
  margin-bottom: 14px;
}

/* 150px HEADER */
#header{
  height: 150px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background-color: rgba(231,216,201,.35);
  background-image: var(--header-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

/* A clean, architectural title overlay */
/* Centered header content */
.headerCenter{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 10px 14px;
}

/* Clickable logo image */
.logoLink{ border-bottom: none; }
.logoImg{
  display: block;
  max-width: min(420px, 78vw);
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.10));
}

/* Stylized text logo */
.logoText{
  border-bottom: none;
  color: var(--ink);
  font-weight: 850;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: clamp(22px, 3.8vw, 34px);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(247,241,232,.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(26,26,26,.10);
}
.logoText:hover{
  color: var(--teal);
  transform: translateY(-1px);
}

/* Tagline */
.siteTagline{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(26,26,26,.70);
  background: rgba(247,241,232,.65);
  border: 1px solid rgba(26,26,26,.10);
  border-radius: 999px;
  padding: 8px 12px;
  backdrop-filter: blur(6px);
}

/* Subtle uncanny: the tagline “breathes” just a hair */
@media (prefers-reduced-motion: no-preference){
  .siteTagline{
    animation: tagpulse 9s ease-in-out infinite;
  }
  @keyframes tagpulse{
    0%,100%{ opacity: .92; }
    50%{ opacity: .82; }
  }
}


.siteTitle{
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: none;
}
.siteTagline{
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}
.logoText{
  transform: rotate(-1.2deg);
}
/* NAVBAR */
#navbar{
  margin-top: 10px;
  padding: 10px 10px;
  background: rgba(247,241,232,.86);
  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(--ink);
  text-decoration:none;
  border-bottom:none;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
}
#navbar a:hover{
  background: rgba(231,216,201,.55);
  color: var(--teal);
  transform: translateY(-1px);
}

/* 3-COLUMN LAYOUT */
#layout{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}

/* SIDE BARS */
aside{
  width: 230px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  backdrop-filter: blur(3px);
}

/* 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;
  backdrop-filter: blur(3px);

  /* Gehry wink */
  transform: rotate(-0.10deg);
  transform-origin: 50% 20%;
}

/* 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(--teal);
}
aside h2{ margin-top: 0; }

.lede{
  max-width: 68ch;
  color: rgba(26,26,26,.86);
  margin: 0 0 12px 0;
}

/* BOXES */
.box{
  background: rgba(231,216,201,.55);
  border: 1px solid rgba(26,26,26,.10);
  border-radius: 14px;
  padding: 10px 10px;
  margin: 10px 0 14px;
}
.panel{
  background: rgba(231,216,201,.70);
  border: 1px solid rgba(26,26,26,.10);
  border-radius: 14px;
  padding: 12px 12px;
  margin: 12px 0 16px;
}

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

/* LINKS */
a{
  color: var(--teal);
  text-decoration:none;
  border-bottom: 1px solid rgba(46,94,94,.30);
}
a:hover{
  color: var(--rust);
  border-bottom-color: rgba(154,62,37,.40);
}

.linklist{
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
}
.linklist li{ margin: 8px 0; }

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

/* BUTTONS */
.btn{
  display:inline-block;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--teal);
  color: var(--teal);
  background: rgba(247,241,232,.55);
  border-bottom: none;
  font-weight: 700;
  letter-spacing: .05em;
}
.btn:hover{
  background: var(--teal);
  color: var(--paper);
}

/* RECENT POSTS LIST — handles Zonelets injected UL/LI */
#recentpostlistdiv{
  margin-top: 10px;
}
#recentpostlistdiv ul{
  list-style:none;
  padding:0;
  margin:0;
}
#recentpostlistdiv li{
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,26,26,.12);
}
#recentpostlistdiv li:last-child{ border-bottom:none; }

/* FOOTER */
#footer{
  margin-top: 14px;
  text-align: center;
  padding: 12px 8px;
  background: rgba(26,26,26,.90);
  color: var(--paper);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
}
#footer a{ color: var(--paper); border-bottom-color: rgba(255,255,255,.20); }

/* SUBTLE UNCANNY: heat shimmer */
@media (prefers-reduced-motion: no-preference){
  #content{
    animation: shimmer 12s ease-in-out infinite;
  }
  @keyframes shimmer{
    0%,100%{ filter: saturate(1); }
    50%{ filter: saturate(1.02); }
  }
}

/* RESPONSIVE */
@media (max-width: 980px){
  #layout{ flex-direction: column; }
  aside{ width: 100%; }
  #content{ transform: none; }
  #navbar{ border-radius: var(--radius); }
  #footer{ border-radius: var(--radius); }
}
/* ===========================
   DESERT STATIC — Signal Strip Glitch
   Subtle: scanlines + brief jitter on message change
   Requires JS to toggle: #signalStrip.glitch
   =========================== */

#signalStrip{
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: hidden;
  isolation: isolate; /* keeps blend modes contained */
}

/* scanlines overlay */
#signalStrip::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.06),
    rgba(255,255,255,.06) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode: overlay;
}

/* occasional “signal noise” speckle */
#signalStrip::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  opacity:.06;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.4) 0 1px, transparent 2px);
  filter: blur(.2px);
  animation: speckleDrift 8s linear infinite;
  mix-blend-mode: overlay;
}

@keyframes speckleDrift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-2%,1%,0); }
}

/* glitch burst triggered by JS */
#signalStrip.glitch{
  animation: stripJitter 220ms steps(2,end) 1;
}
#signalStrip.glitch marquee{
  animation: textGlitch 220ms steps(2,end) 1;
}

@keyframes stripJitter{
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

@keyframes textGlitch{
  0%   { filter: none; text-shadow: none; }
  40%  { filter: hue-rotate(18deg) contrast(1.1); text-shadow: 1px 0 rgba(46,94,94,.55), -1px 0 rgba(154,62,37,.45); }
  80%  { filter: hue-rotate(-14deg) contrast(1.15); text-shadow: -1px 0 rgba(46,94,94,.55), 1px 0 rgba(154,62,37,.45); }
  100% { filter: none; text-shadow: none; }
}
/* ===========================
   DESERT STATIC — Signal Strip Glitch
   Subtle: scanlines + brief jitter on message change
   Requires JS to toggle: #signalStrip.glitch
   =========================== */

#signalStrip{
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: hidden;
  isolation: isolate; /* keeps blend modes contained */
}

/* scanlines overlay */
#signalStrip::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.06),
    rgba(255,255,255,.06) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode: overlay;
}

/* occasional “signal noise” speckle */
#signalStrip::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  opacity:.06;
  background:
    radial-gradient(circle at 20% 40%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.4) 0 1px, transparent 2px);
  filter: blur(.2px);
  animation: speckleDrift 8s linear infinite;
  mix-blend-mode: overlay;
}

@keyframes speckleDrift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-2%,1%,0); }
}

/* glitch burst triggered by JS */
#signalStrip.glitch{
  animation: stripJitter 220ms steps(2,end) 1;
}
#signalStrip.glitch marquee{
  animation: textGlitch 220ms steps(2,end) 1;
}

@keyframes stripJitter{
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

@keyframes textGlitch{
  0%   { filter: none; text-shadow: none; }
  40%  { filter: hue-rotate(18deg) contrast(1.1); text-shadow: 1px 0 rgba(46,94,94,.55), -1px 0 rgba(154,62,37,.45); }
  80%  { filter: hue-rotate(-14deg) contrast(1.15); text-shadow: -1px 0 rgba(46,94,94,.55), 1px 0 rgba(154,62,37,.45); }
  100% { filter: none; text-shadow: none; }
}