/* ==========================================================================
   MytiliniNews — DESIGN SYSTEM «ΤΟΛΜΗΡΟ» (V3)
   Brutalist / raw editorial. Αιχμηρές γωνίες, καμία σκιά, καθαρή αντίθεση.
   ΟΛΟ το θέμα ελέγχεται από το :root. Καμία σελίδα δεν έχει δικά της χρώματα.
   ========================================================================== */
:root{
  /* --- παλέτα: 3 τιμές + χαρτί. Τίποτε άλλο. --- */
  --ink:#0d0d0d;               /* μαύρο — κείμενο, πλάκες, κανόνες */
  --paper:#f4f4f0;             /* ζεστό λευκό (χαρτί) — φόντο σελίδας */
  --white:#ffffff;
  --red:#d6001c;               /* ΕΝΑ accent, παντού */
  --red-dk:#a80015;            /* hover / σκούρο */
  --muted:#6b6b66;             /* δευτερεύον κείμενο */
  --rule:#0d0d0d;              /* δυνατοί κανόνες */
  --rule-soft:#d9d7d1;         /* αχνές γραμμές διαχωρισμού */
  --grid:rgba(13,13,13,.065);  /* ορατό πλέγμα στηλών */

  /* --- ΣΥΜΒΑΤΟΤΗΤΑ με το προηγούμενο συμβόλαιο μεταβλητών (μην τα αφαιρέσεις) --- */
  --ink-2:#3a3a37; --bg:var(--paper); --bg-2:#ecebe6; --card:var(--white);
  --line:var(--rule-soft); --accent:var(--red); --accent-2:var(--ink);
  --danger:var(--red); --warn:var(--ink); --ok:var(--ink);

  /* --- τυπογραφία: condensed heavy για τίτλους · καθαρό sans για σώμα ·
         MONO για τις ετικέτες (σφραγίδες μητρώου, όχι «chips») --- */
  --font-display:'Arial Black','Helvetica Neue',Impact,'Noto Sans',system-ui,sans-serif;
  --font-head:var(--font-display);
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'Courier New',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* --- ΑΙΧΜΗΡΕΣ ΓΩΝΙΕΣ ΠΑΝΤΟΥ: brutalist, όχι «mobile app» --- */
  --r-sm:0; --r-md:0; --r-lg:0;

  --sp-1:4px; --sp-2:8px; --sp-3:14px; --sp-4:22px; --sp-6:38px; --sp-8:60px;
  --w-max:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.55;
  text-wrap:pretty;
  /* το ορατό πλέγμα στηλών: η «σκαλωσιά» που κάνει το σχέδιο να μη κρύβεται */
  background-image:linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:calc(100% / 4) 100%;
}
.wrap{max-width:var(--w-max);margin:0 auto;padding:0 var(--sp-4)}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-soft)}
a:hover{color:var(--red);border-bottom-color:var(--red)}
img{max-width:100%;height:auto}

/* ===================== MASTHEAD-ΕΞΩΦΥΛΛΟ ===================== */
.site-head{background:var(--paper);border-bottom:5px solid var(--rule)}
.site-head .wrap{padding-top:var(--sp-3);padding-bottom:var(--sp-2)}
.brand{
  font-family:var(--font-display);font-weight:900;
  /* ⚠️ ΓΙΑΤΙ 10.2vw ΚΑΙ ΟΧΙ 12.5vw: το «MYTILININEWS» είναι ΜΙΑ λέξη — το
     `Mytilini<span class="r">News</span>` δεν έχει κενό ανάμεσα, άρα ΔΕΝ έχει σημείο
     αλλαγής γραμμής και δεν σπάει ποτέ. Το πλάτος του είναι ~7.46× το μέγεθος
     γραμματοσειράς. Επιπλέον το `vw` υπολογίζεται ΜΕ το scrollbar ενώ το διαθέσιμο
     πλάτος (clientWidth) ΟΧΙ — στα 873px viewport το 11.2vw=97.8px έβγαζε masthead
     που έφτανε ΑΚΡΙΒΩΣ στο όριο και το «News» ξέφευγε 20px δεξιά. Το 10.2vw αφήνει
     ~20% περιθώριο σε ΚΑΘΕ πλάτος, scrollbar ή όχι. */
  font-size:clamp(2.4rem,10.2vw,8.6rem);
  line-height:.8;letter-spacing:-.045em;text-transform:uppercase;
  margin:0;display:block;
  /* δίχτυ ασφαλείας — αν ποτέ ξαναυπάρξει υπερχείλιση, σπάει η λέξη, όχι η σελίδα */
  overflow-wrap:anywhere;
}
.brand a{color:var(--ink);border:0;display:block}
.brand a:hover{color:var(--ink);border:0}
.brand .r{color:var(--red)}
.tagline{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
  margin:var(--sp-2) 0 var(--sp-3);border-top:1px solid var(--rule-soft);
  padding-top:var(--sp-2);
}
.site-nav{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;border-top:2px solid var(--rule);padding-top:var(--sp-2);
}
.site-nav a{border:0;border-bottom:3px solid transparent;padding-bottom:3px}
.site-nav a[aria-current="page"]{border-bottom-color:var(--red);color:var(--red)}

/* ===================== ΕΤΙΚΕΤΕΣ-ΣΦΡΑΓΙΔΕΣ ===================== */
/* Μονό περίγραμμα = ουδέτερο · διπλό = σήμανση · συμπαγές = ταυτότητα */
.badge{
  display:inline-block;font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.5;
  padding:1px 6px;border:1px solid var(--rule);background:var(--white);
  color:var(--ink);margin:0 4px 4px 0;white-space:nowrap;
}
.badge-red{color:var(--white);background:var(--red);border-color:var(--red)}
.badge-warn{border-style:double;border-width:3px}
.badge-boom{color:var(--white);background:var(--ink);border-color:var(--ink)}
.masked{
  display:inline-block;font-family:var(--font-mono);font-size:.64rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);
  padding:0 5px;margin-left:5px;color:var(--ink);cursor:help;
}

/* ===================== ΠΛΑΚΕΣ / ΑΡΙΘΜΟΙ ===================== */
/* Το γιγάντιο ποσό σε μαύρη πλάκα — το κύριο γραφικό στοιχείο */
.plate{background:var(--ink);color:var(--white);padding:var(--sp-4) var(--sp-3);margin:0 0 var(--sp-3)}
.plate .n{
  font-family:var(--font-display);font-weight:900;line-height:.9;
  font-size:clamp(1.9rem,8.5vw,4.6rem);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:block;
}
.plate .n .e{color:var(--red)}
.plate .l{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.75;margin-top:var(--sp-2);display:block;
}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2px;margin:0 0 var(--sp-4)}
.stat{background:var(--ink);color:var(--white);padding:var(--sp-3) var(--sp-2);text-align:center;min-width:0}
/* Οι ετικέτες είναι MONO UPPERCASE με letter-spacing: σε στενά κελιά (5 στήλες στα
   320px -> 56px) μια λέξη όπως «CROSS-ORG» βγαίνει έξω από το κελί και σπρώχνει τη
   σελίδα. Σπάει η λέξη, δεν σπάει η σελίδα. */
.stat b,.stat span{overflow-wrap:anywhere;word-break:break-word}
.stat:nth-child(2){background:var(--red);transform:translateY(-6px)}
.stat:last-child{border:2px solid var(--white);outline:2px solid var(--ink)}
.stat b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.3rem,5.5vw,2.2rem);line-height:1;font-variant-numeric:tabular-nums;
}
.stat span{
  display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;opacity:.8;margin-top:5px;
}

/* ===================== ΚΕΙΜΕΝΟ ===================== */
.card{background:var(--white);border:1px solid var(--rule);padding:var(--sp-4)}
h1.art{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.5rem,6vw,3rem);line-height:.95;letter-spacing:-.03em;
  margin:0 0 var(--sp-3);
}
h2{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:-.01em;margin:var(--sp-6) 0 var(--sp-3);
  border-bottom:3px solid var(--rule);padding-bottom:5px;
}
.prose{max-width:70ch}
.prose p{margin:0 0 var(--sp-3)}
.meta{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:var(--sp-3);
  border-bottom:1px solid var(--rule-soft);padding-bottom:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.meta .sep{opacity:.4}
.small{font-size:.82rem}
.muted{color:var(--muted)}
.rule{border:0;border-top:1px solid var(--rule-soft);margin:var(--sp-4) 0}
.btn{
  display:inline-block;background:var(--red);color:var(--white);font-weight:800;
  padding:11px 20px;border:0;font-family:var(--font-mono);font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.btn:hover{background:var(--red-dk);color:var(--white);border:0}

/* ===================== ΡΟΗ (όχι «κάρτες») ===================== */
.item{padding:var(--sp-3) 0;border-bottom:1px solid var(--rule-soft)}
.item h2,.item h3{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:1.02rem;line-height:1.15;letter-spacing:-.015em;margin:0 0 3px;
  border:0;padding:0;
}
.item h2 a,.item h3 a{border-bottom:0}
.item h2 a:hover,.item h3 a:hover{border-bottom:2px solid var(--red)}

/* ===================== ΠΙΝΑΚΑΣ-ΤΕΡΜΑΤΙΚΟ ===================== */
/* ⚠️ Ο πίνακας ΣΚΡΟΛΑΡΕΙ ΜΕΣΑ ΤΟΥ σε ΚΑΘΕ πλάτος — όχι μόνο στο κινητό.
   Οι πίνακες αναδόχων χρειάζονται ~758px φυσικό πλάτος· αν το `overflow-x:auto`
   μπει μόνο στο media query (≤600px), η ζώνη 601-760px σπάει τη σελίδα. Μετρημένο:
   8 αποτυχίες στα 620/640/660/680/700/720/740/760px. */
.table{width:100%;border-collapse:collapse;font-size:.9rem;
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table th,.table td{text-align:left;padding:10px;border-bottom:1px solid var(--rule-soft)}
.table th{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:700;
  border-bottom:2px solid var(--rule);
}
.table tr:hover td{background:var(--bg-2)}
.table td.num,.table th.num{
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.kv{
  display:grid;grid-template-columns:auto 1fr;gap:7px var(--sp-4);font-size:.92rem;
  border-top:1px solid var(--rule);padding-top:var(--sp-3);
}
.kv dt{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-top:3px;
}
.kv dd{margin:0;font-weight:700}

/* ============ ΥΠΟΣΕΛΙΔΟ: το νομικό ΟΡΑΤΟ, όχι θαμμένο σε γκρι 8pt ============ */
.site-foot{
  margin-top:var(--sp-8);border-top:5px solid var(--red);background:var(--ink);
  color:var(--white);padding:var(--sp-6) 0;font-size:.84rem;line-height:1.65;
}
.site-foot b{
  color:var(--white);text-transform:uppercase;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
}
.site-foot a{color:var(--white);border-bottom:1px solid rgba(255,255,255,.45)}
.site-foot a:hover{color:var(--red);border-bottom-color:var(--red)}
.site-foot .small{opacity:.75}
.afmnote{
  margin:var(--sp-3) 0 0;font-size:.82rem;line-height:1.6;color:var(--ink-2);
  border-left:5px solid var(--red);background:var(--white);padding:10px 14px;
}

@media (max-width:600px){
  body{font-size:16px;background-size:calc(100% / 2) 100%}
  .wrap{padding:0 var(--sp-3)}
  /* Ο ΠΙΝΑΚΑΣ δεν σπρώχνει τη σελίδα: σκρολάρει ΜΕΣΑ του. Χωρίς αυτό, οι πίνακες
     αναδόχων (6 στήλες) βγάζουν 649px σε οθόνη 390px -> οριζόντιο overflow. */
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:.8rem}
  .table th,.table td{padding:7px 5px}
  /* Το masthead: το «MYTILININEWS» σε Arial Black δεν χωρά σε 12.5vw στα 390px
     (το «NEWS» μόνο του έφτανε 397px). Μικραίνει ώστε να ΚΑΘΕΤΑΙ, όχι να κόβεται. */
  .brand{font-size:clamp(1.7rem,8.2vw,3.4rem)}
  .stat:nth-child(2){transform:none}
  .tagline{letter-spacing:.14em}
  .site-nav{gap:var(--sp-3)}
}
@media print{
  .site-nav,.site-foot{display:none}
  .plate,.stat{background:var(--white);color:var(--ink);border:1px solid var(--ink)}
}