/* ============================================================
   ΤΟ ΗΜΕΡΟΛΟΓΙΟ — κοινό στυλ για το αρχείο και τα άρθρα
   Λευκό φόντο: εδώ ο κόσμος διαβάζει.
   ============================================================ */
:root{
  --bg:#070B10; --bg-2:#0B1218;
  --ink:#EAEFF4; --muted:#B7C3CF; --line:rgba(234,239,244,.1);
  --cyan:#2BD9EE;
  --paper:#FFFFFF; --paper-ink:#191C20; --paper-mut:#3D4248;
  --paper-line:rgba(25,28,32,.13); --paper-accent:#08525F;
  --serif:"Times New Roman", Times, serif;
  --sans:Arial, Helvetica, sans-serif;
  --mono:"Courier New", ui-monospace, monospace;
}
*{ box-sizing:border-box; margin:0; }
[hidden]{ display:none !important; }
body{
  background:var(--paper); color:var(--paper-ink);
  font-family:var(--sans); font-size:17px; line-height:1.7;
}
img{ max-width:100%; height:auto; }

/* ---------- μπάρα ---------- */
.bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem clamp(1rem,4vw,2.2rem);
  background:var(--bg); border-bottom:1px solid var(--line);
}
.bar .wordmark{ font-weight:800; letter-spacing:.24em; font-size:.9rem; color:var(--ink); text-decoration:none; }
.bar nav{ display:flex; gap:1.2rem; align-items:center; }
.bar nav a{ color:var(--muted); text-decoration:none; font-size:.92rem; }
.bar nav a:hover{ color:var(--ink); }
.bar nav a.btn{ color:#06282e; }
.bar nav a.btn:hover{ color:#06282e; }
.btn{
  display:inline-block; background:var(--cyan); color:#06282e;
  font-family:var(--sans); font-weight:700; font-size:.95rem;
  text-decoration:none; border:0; border-radius:999px;
  padding:.55rem 1.3rem; cursor:pointer;
}
.btn:hover{ filter:brightness(1.08); }
.btn:focus-visible{ outline:2px solid var(--paper-ink); outline-offset:3px; }

/* ---------- κορμός ---------- */
.wrap{ width:min(720px, 100% - 2.6rem); margin:0 auto; }
.kicker{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--paper-accent); margin-bottom:1rem;
}
h1{
  font-family:var(--serif); font-weight:600; line-height:1.12;
  font-size:clamp(2rem,5.4vw,3.1rem); text-wrap:balance;
}
h2{
  font-family:var(--serif); font-weight:600; line-height:1.2;
  font-size:clamp(1.45rem,3.6vw,1.95rem); margin:2.6rem 0 .8rem; text-wrap:balance;
}
p{ margin:1rem 0; }
a{ color:var(--paper-accent); }
strong{ font-weight:700; color:var(--paper-ink); }

/* ---------- αρχείο ---------- */
.arch-head{ padding:clamp(3rem,7vw,4.5rem) 0 clamp(1.6rem,4vw,2.4rem); }
.arch-head p.lead{ color:var(--paper-mut); font-size:1.1rem; max-width:34em; margin-top:.9rem; }
.posts{ display:flex; flex-direction:column; border-top:1px solid var(--paper-line); }
.post-card{
  display:block; text-decoration:none; color:inherit;
  padding:1.8rem 0; border-bottom:1px solid var(--paper-line);
  transition:opacity .15s ease;
}
.post-card:hover{ opacity:.72; }
.post-card time{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  color:var(--paper-mut); text-transform:uppercase;
}
.post-card h3{
  font-family:var(--serif); font-weight:600; line-height:1.2;
  font-size:clamp(1.35rem,3.4vw,1.75rem); margin:.5rem 0 .4rem; text-wrap:balance;
}
.post-card p{ color:var(--paper-mut); margin:0; font-size:1.02rem; }

/* ---------- άρθρο ---------- */
.art-head{ padding:clamp(2.6rem,6vw,4rem) 0 1.4rem; }
.art-meta{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  color:var(--paper-mut); text-transform:uppercase; margin-bottom:1rem;
}
.art-lead{ font-size:1.15rem; color:var(--paper-mut); margin-top:1.2rem; max-width:34em; }
article{ padding-bottom:1rem; }
article ul, article ol{ margin:1rem 0 1rem 1.3rem; }
article li{ margin:.5rem 0; }
.pull{
  border-left:2px solid var(--paper-accent);
  padding:.2rem 0 .2rem 1.2rem; margin:1.8rem 0;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.15rem,2.8vw,1.4rem); line-height:1.4;
}
.figure-num{
  display:flex; flex-wrap:wrap; gap:1.6rem;
  border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
  padding:1.4rem 0; margin:1.8rem 0;
}
.figure-num div{ flex:1 1 8rem; }
.figure-num b{
  display:block; font-family:var(--sans); font-weight:700;
  font-size:1.9rem; font-variant-numeric:tabular-nums;
}
.figure-num span{ color:var(--paper-mut); font-size:.9rem; }

/* ---------- κλείσιμο άρθρου: προς τον υπολογιστή ---------- */
.art-cta{
  background:var(--bg); color:var(--ink);
  border-radius:16px; padding:clamp(1.8rem,5vw,2.6rem);
  margin:2.6rem 0 1rem; text-align:center;
}
.art-cta h3{ font-family:var(--serif); font-weight:600; font-size:clamp(1.35rem,3.4vw,1.8rem); text-wrap:balance; }
.art-cta p{ color:var(--muted); max-width:30em; margin:.8rem auto 1.4rem; }

/* ---------- εγγραφή ---------- */
.signup{
  border:1px solid var(--paper-line); border-top:2px solid var(--paper-accent);
  border-radius:14px; padding:clamp(1.6rem,4vw,2.2rem); margin:3rem 0 4rem;
}
.signup .kicker{ margin-bottom:.6rem; }
.signup h3{ font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,3.2vw,1.7rem); }
.signup p{ color:var(--paper-mut); font-size:1rem; margin:.6rem 0 1.2rem; max-width:34em; }
.signup form{ display:flex; flex-wrap:wrap; gap:.6rem; }
.signup input{
  flex:1 1 16rem; min-width:0;
  font-family:var(--sans); font-size:1.05rem; color:var(--paper-ink);
  background:#fff; border:1px solid var(--paper-line); border-radius:8px;
  padding:.7rem .9rem;
}
.signup input:focus{ outline:2px solid var(--paper-accent); outline-offset:1px; border-color:transparent; }
.signup .btn{ flex:none; background:var(--paper-ink); color:#fff; }
.signup .msg{ margin:.9rem 0 0; font-size:.95rem; color:var(--paper-mut); }
.signup .msg.err{ color:#B3261E; }
.signup .msg.ok{ color:var(--paper-accent); font-weight:700; }

/* ---------- υποσέλιδο ---------- */
footer{
  background:var(--bg); color:var(--muted);
  text-align:center; padding:2.4rem 1.4rem 3rem; font-size:.9rem;
}
footer .wordmark{ display:block; font-weight:800; letter-spacing:.24em; color:var(--ink); margin-bottom:.5rem; }
footer nav{ display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
footer nav a{ color:var(--muted); text-decoration:none; }
footer nav a:hover{ color:var(--ink); }

@media (max-width:560px){
  .bar nav a.hide-sm{ display:none; }
}

/* ============================================================
   ΤΟ ΡΑΦΙ — κάθε τεύχος είναι μια ράχη βιβλίου
   ============================================================ */
.shelf-zone{ position:relative; margin:2.4rem 0 3.4rem; }
.shelf-hint{
  position:absolute; right:0; top:-1.9rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  color:var(--paper-mut); pointer-events:none;
}
.shelf-tip{
  position:absolute; left:0; top:-3.4rem; z-index:3;
  background:var(--paper-ink); color:#fff;
  border-radius:6px; padding:.5rem .8rem;
  font-family:var(--mono); font-size:.78rem; line-height:1.5;
  max-width:min(30rem, 90%); pointer-events:none;
  opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease;
}
.shelf-tip.on{ opacity:1; transform:none; }
.shelf-tip b{ display:block; font-weight:400; }
.shelf-tip span{ color:#9AA3AC; font-size:.7rem; letter-spacing:.14em; }

.shelf{
  display:flex; align-items:flex-end;
  overflow-x:auto; overflow-y:hidden;
  padding:2.6rem 0 1.4rem;
  perspective:1600px; perspective-origin:50% 60%;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; scroll-behavior:smooth;
  border-bottom:2px solid var(--paper-ink);
}
.shelf::-webkit-scrollbar{ display:none; }
.shelf.dragging{ cursor:grabbing; scroll-behavior:auto; }
/* η ράγα κεντράρεται όσο τα βιβλία χωράνε, και κυλάει σωστά όταν ξεχειλίσουν */
.shelf-track{ display:flex; align-items:flex-end; gap:.35rem; margin-inline:auto; padding:0 .2rem; }

/* κάθε τεύχος είναι το εξώφυλλο ενός βιβλίου: ο τίτλος διαβάζεται οριζόντια */
.book{
  flex:none; position:relative; display:block; text-decoration:none;
  width:196px; height:272px;
  transform-style:preserve-3d;
  transform:rotateY(-7deg);
  transform-origin:left bottom;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), height .28s ease;
  border-radius:3px 6px 6px 3px;
  box-shadow:6px 10px 22px rgba(20,24,29,.28);
}
.book:nth-child(3n)   { height:288px; }
.book:nth-child(4n)   { height:262px; }
.book:nth-child(7n)   { transform:rotateY(-4deg); }
.book:hover, .book:focus-visible{
  transform:rotateY(0deg) translateY(-12px);
  z-index:2; outline:none;
}
.book:focus-visible{ box-shadow:0 0 0 3px var(--paper-accent), 6px 10px 22px rgba(20,24,29,.28); }

/* το εξώφυλλο: οριζόντιος τίτλος πάνω, μήνας κάτω */
.book .sp{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:1.3rem 1.25rem 1.1rem 1.1rem;
  border-radius:inherit; overflow:hidden;
  text-align:left;
}
.book .sp-rule{ width:26px; height:2px; background:currentColor; opacity:.5; flex:none; margin-bottom:.95rem; }
.book .sp-t{
  font-family:var(--serif); font-weight:600;
  font-size:1.22rem; line-height:1.18; letter-spacing:0;
  text-wrap:balance;
  overflow:hidden; flex:1 1 auto; min-height:0;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px), transparent 100%);
          mask-image:linear-gradient(180deg,#000 calc(100% - 18px), transparent 100%);
}
.book .sp-m{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  opacity:.6; margin-top:.8rem; flex:none;
}
/* το «κόψιμο» των σελίδων στη δεξιά άκρη */
.book::after{
  content:""; position:absolute; top:2px; bottom:2px; right:0; width:5px;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px), #EDE9E0;
  border-radius:0 3px 3px 0;
}

/* παλέτα ραχών */
.book.c1{ background:#0F1620; color:#EAEFF4; }
.book.c2{ background:#12233A; color:#EAEFF4; }
.book.c3{ background:#0B6E7F; color:#EAF9FC; }
.book.c4{ background:#F2EDE3; color:#191C20; }
.book.c5{ background:#1B2B3D; color:#9FE9F5; }
.book.c6{ background:#FFFFFF; color:#191C20; box-shadow:6px 10px 22px rgba(20,24,29,.22), inset 0 0 0 1px var(--paper-line); }

/* βελάκια */
.shelf-zone.static .shelf-nav, .shelf-zone.static .shelf-hint{ display:none; }
.shelf-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; display:flex; gap:.5rem; }
.shelf-nav.left{ left:-1.5rem; }
.shelf-nav.right{ right:-1.5rem; }
.shelf-nav button{
  width:2.6rem; height:2.6rem; border-radius:50%; cursor:pointer;
  background:#fff; border:1px solid var(--paper-line); color:var(--paper-ink);
  font-size:1.1rem; line-height:1; display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(20,24,29,.14);
}
.shelf-nav button:hover{ border-color:var(--paper-accent); color:var(--paper-accent); }
.shelf-nav button:disabled{ opacity:.3; cursor:default; }

@media (max-width:640px){
  .book{ width:158px; height:224px; }
  .book:nth-child(3n){ height:236px; }
  .book:nth-child(4n){ height:216px; }
  .book .sp{ padding:1rem .95rem .9rem .9rem; }
  .book .sp-t{ font-size:1.05rem; }
  .shelf-nav{ display:none; }
  .shelf-hint{ font-size:.62rem; }
}
@media (prefers-reduced-motion: reduce){
  .shelf{ scroll-behavior:auto; }
  .book{ transition:none; }
  .shelf-tip{ transition:none; }
}