@import url('https://fonts.googleapis.com/css2?family=Anton&family=Libre+Baskerville:wght@400;700&family=Courier+Prime&display=swap');

:root{
  --paper:#fff;
  --ink:#000;
  --muted:#111;
  --maxw:1200px;
  --g:18px;
}

*{box-sizing:border-box}

html, body{
  width:100%;
  overflow-x:hidden; /* kill horizontal scroll */
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Libre Baskerville", serif;
  line-height:1.45;
}

img{
  max-width:100%;
  height:auto;
}

/* subtle halftone */
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.09;
  background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.18) 1px, transparent 1.25px);
  background-size:10px 10px;
  mix-blend-mode:multiply;
}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 18px;
}

/* Accessibility: hide skip link unless focused */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:18px;
  top:18px;
  width:auto;
  height:auto;
  padding:10px 14px;
  background:#fff;
  border:3px solid #000;
  z-index:9999;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-decoration:none;
  box-shadow:6px 6px 0 #000;
}

/* =====================
   MASTHEAD
===================== */
.masthead{
  margin:18px 0 10px;
  border-top:6px solid #000;
  border-bottom:6px solid #000;
  background:#fff;
}

.masthead-inner{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:16px 14px 12px;
  align-items:center;
  min-height:150px;
}

/* Brand block */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* LOGO */
.brand-logo{
  display:inline-block;
  text-decoration:none;
}
.brand-logo img{
  display:block;
  height:140px;      /* desktop masthead */
  width:auto;
  max-width:860px;
  object-fit:contain;
  filter:grayscale(100%) contrast(1.2);
}

/* STRAPLINE */
.strapline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:10px;
  width:100%;
  max-width:820px;
}
.strapline-rule{
  flex:1;
  height:3px;
  background:#000;
}
.strapline-text{
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:18px;
  line-height:1;
}

/* META BOX = FULL FRAME */
.masthead-meta{
  text-align:center;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;

  border:3px solid #000;
  padding:10px 14px;
  background:transparent;
}

/* optional small label inside meta */
.badge{
  display:inline-block;
  border:none;          /* ⛔ no frame */
  padding:0;            /* καθαρό text */
  margin-bottom:10px;
}


/* =====================
   NAVBAR
===================== */
.navbar{
  border-top:3px solid #000;
  border-bottom:3px solid #000;
  background:#fff;
  margin-bottom:18px;
}
.navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 6px;
}

.menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  justify-content:center; /* centered line */
}

.menu a{
  color:inherit;
  text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{
  border-bottom-color:#000;
}

.kicker{
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  text-align:center;
  white-space:nowrap;
}

/* =====================
   GRID
===================== */
.grid{
  display:grid;
  grid-template-columns: 1.1fr 1.6fr 1.1fr;
  gap: var(--g);
  margin:18px 0 18px;
}

/* Panels */
.panel{
  border:3px solid #000;
  background:#fff;
  padding:12px;
  box-shadow: 6px 6px 0 #000;
}

.panel-title{
  margin:0 0 10px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  border-bottom:3px solid #000;
  padding-bottom:8px;
  text-align:left;
}

.lead{
  border-width:4px;
}

/* Headline */
.headline{
  margin:0;
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size: clamp(30px, 3.8vw, 72px);
  line-height:1.05;
}

.deck{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
}

.rule{
  height:3px;
  background:#000;
  margin:12px 0;
}

/* Lists */
.headline-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.headline-item{
  padding-bottom:12px;
  border-bottom:3px solid #000;
}

.headline-item:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.headline-item h3{
  margin:0;
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:20px;
  line-height:1.15;
}

.headline-item p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

/* Photos */
.photo-box{
  margin-top:14px;
  border-top:3px solid #000;
  padding-top:14px;
}
.bw-photo{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(100%) contrast(1.2);
}

/* =====================
   TICKER
===================== */
.ticker{
  margin-bottom:28px;
  text-align:center;
}
.ticker .panel-title{
  text-align:left;
}
.ticker-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  justify-content:center;
}

/* =====================
   FOOTER
===================== */
.site-footer{
  border-top:6px solid #000;
  margin-top:26px;
  padding:18px 0 28px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  text-align:center;
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width:980px){
  .grid{ grid-template-columns:1fr 1fr; }

  .navbar-inner{
    flex-direction:column;
    align-items:center;
  }

  .kicker{
    white-space:normal;
  }
}

@media (max-width:680px){
  .container{ padding:0 14px; }

  .masthead-inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-height:auto;
  }

  /* Key fix: keep logo sane on mobile */
  .brand-logo img{
    height:88px;       /* was too big -> caused weird scaling */
    max-width:92vw;
  }

  .strapline{
    max-width:100%;
  }
  .strapline-text{
    font-size:16px;
  }

  /* Keep meta boxed, centered */
  .masthead-meta{
    width:auto;
    margin-top:10px;
  }

  .navbar-inner{
    align-items:center;
  }

  .menu{
    justify-content:center;
  }

  .grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .panel{
    box-shadow: 5px 5px 0 #000;
  }

  .headline{
    font-size: clamp(28px, 8vw, 54px);
  }
}

/* Helps reduce pinch-zoom side effects in some mobile browsers */
html, body{
  touch-action: pan-x pan-y;
}


.post-image{
  margin-top:14px;
  border-top:3px solid #000;
  padding-top:14px;
}

.post-image img{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(100%) contrast(1.2);
}

.post-image{
  margin:14px 0;
  border-top:3px solid #000;
  border-bottom:3px solid #000;
  padding:10px 0;
}

.post-image img{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(100%) contrast(1.25);
}

#radar .headline-item h3{
  font-size:18px;
  letter-spacing:.04em;
}

#radar .headline-item p{
  font-size:12px;
  font-style:italic;
}

/* =====================
   TICKER MARQUEE
===================== */
.ticker-marquee{
  border-top:3px solid #000;
  padding-top:10px;
  overflow:hidden;
  white-space:nowrap;
}

.ticker-track{
  display:inline-flex;
  align-items:center;
  will-change: transform;
  animation: deadwax-marquee 28s linear infinite;
}

.ticker-content{
  display:inline-block;
  padding-right:40px; /* gap between repeats */
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
}

/* Pause on hover (desktop) */
.ticker-marquee:hover .ticker-track{
  animation-play-state: paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; }
}

@keyframes deadwax-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}