/* mmpsy: Μαρία Μαραγκοπούλου
   Ιδέα: η σπείρα του λογοτύπου, μια διαδρομή από την επιφάνεια προς το κέντρο.
   Χρώματα μόνο από το λογότυπο. Η ουρά της σπείρας γίνεται νήμα ανάμεσα στις ενότητες.
   Ίσιες γωνίες, καμία σκιά. Μία κίνηση: η σπείρα γυρίζει αργά με το scroll. */

:root {
  --paper: #fbf8f3;
  --ink: #17393b;       /* κείμενο */
  --petrol: #1f6f73;    /* τίτλοι, σύνδεσμοι, κουμπιά */
  --teal: #28a0a4;
  --turq: #5cd0c8;
  --mint: #bce8dc;
  --peach: #ecb88c;
  --deep: #134447;      /* η μία σκούρα ενότητα */
  --mute: #557073;
  --line: #d9e7e3;
  --f: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --caps: "Didact Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.25rem/1.6 var(--f); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--peach); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f); font-weight: 450; color: var(--petrol); line-height: 1.08; margin: 0 0 .5em; letter-spacing: 0; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
h3 { font-size: 1.5rem; margin-top: 1.8em; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: .5rem; z-index: 9; }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 2rem; }
.narrow { max-width: 42rem; }

/* η υπογραφή: SVG ως μάσκα, για να παίρνει όποιο χρώμα θέλουμε */
.onoma { display: block; aspect-ratio: 1464 / 344; background: currentColor; -webkit-mask: url(/img/onoma.svg) left center / contain no-repeat; mask: url(/img/onoma.svg) left center / contain no-repeat; }
.caps { font: 400 .8rem/1.4 var(--caps); letter-spacing: .28em; color: var(--teal); }

/* ---------- πάνω μέρος ---------- */
.top { position: relative; z-index: 3; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.2rem; padding-bottom: 1.2rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--petrol); }
.brand img { width: 46px; height: 46px; }
.brand .onoma { width: 210px; }
.nav { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; font-size: 1rem; }
.nav a { text-decoration: none; color: var(--ink); padding: .4rem 0; background: linear-gradient(var(--peach), var(--peach)) left bottom / 0 2px no-repeat; transition: background-size .25s; }
.nav a:hover, .nav a[aria-current] { background-size: 100% 2px; }
.nav a[aria-current] { color: var(--petrol); }

/* ---------- κουμπιά ---------- */
.btn { display: inline-flex; align-items: center; gap: .6rem; border: 1.5px solid var(--petrol); padding: .8rem 1.3rem; min-height: 48px; text-decoration: none; color: var(--petrol); font-weight: 500; line-height: 1.2; }
.btn:hover { background: var(--petrol); color: var(--paper); }
.btn.full { background: var(--petrol); color: var(--paper); }
.btn.full:hover { background: var(--deep); border-color: var(--deep); }
.btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ---------- νήμα: η ουρά της σπείρας ---------- */
.thread { display: block; width: 100%; height: 70px; margin: 0; overflow: visible; }
.thread path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.thread .a { stroke: var(--teal); }
.thread .b { stroke: var(--peach); }
.thread circle { fill: var(--peach); }
.thread circle.t { fill: var(--teal); }

/* ---------- αρχική: άνοιγμα ---------- */
.hero { position: relative; overflow-x: clip; min-height: min(86vh, 52rem); display: grid; align-items: center; }
.hero .wrap { width: 100%; }
.hero .txt { position: relative; z-index: 2; max-width: 34rem; padding: 3rem 0 5rem; }
.hero .onoma { width: min(560px, 100%); color: var(--ink); margin-bottom: 1.4rem; }
.hero .lead { font-size: 1.5rem; line-height: 1.55; margin-top: 2rem; max-width: 30rem; }
.hero .spiral { position: absolute; z-index: 1; right: -14vw; top: 50%; width: min(64vw, 980px); translate: 0 -50%; pointer-events: none; }
.hero .spiral img { width: 100%; transform-origin: 33% 52%; rotate: var(--turn, 0deg); }

/* ---------- ενότητες ---------- */
.sec { padding: 6rem 0; }
.sec.tight { padding: 3.5rem 0; }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
.two > :first-child h2 { position: sticky; top: 2rem; }
.big { font-size: clamp(1.35rem, 2.2vw, 1.65rem); line-height: 1.5; }
.drop { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: var(--peach); margin-right: .5em; vertical-align: .08em; }
.drop.t { background: var(--teal); } .drop.q { background: var(--turq); } .drop.m { background: var(--mint); }

/* Ποιον αφορά: κείμενο πάνω σε σπείρα */
.whom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.whom svg { width: 100%; max-width: 640px; overflow: visible; }
.whom text { font: 450 30px var(--f); fill: var(--petrol); }
.whom text tspan.p { fill: var(--peach); }
.whom .center { font-size: 36px; fill: var(--teal); }
.whom ul { list-style: none; padding: 0; margin: 0; }
.whom li { font: 450 clamp(1.6rem, 2.8vw, 2.2rem)/1.25 var(--f); color: var(--petrol); padding: .45rem 0; border-bottom: 1px solid var(--line); }
.whom li:first-child { border-top: 1px solid var(--line); }

/* η σκούρα ενότητα */
.deep { background: var(--deep); color: #e3f3ef; }
.deep h2 { color: var(--peach); }
.deep a { color: var(--mint); }
.deep .hl { color: var(--turq); }

/* ομάδα */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; margin-top: 3rem; }
.team a { text-decoration: none; color: var(--ink); display: block; }
.team .ph { position: relative; }
.team img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ph { position: relative; }
.ph::after { content: ""; position: absolute; right: -10px; top: -10px; width: 26px; height: 26px; border-radius: 50%; background: var(--c, var(--peach)); }
.team b { display: block; font-weight: 550; font-size: 1.35rem; color: var(--petrol); margin-top: .9rem; }
.team span { display: block; font-size: .92rem; color: var(--mute); line-height: 1.45; margin-top: .2rem; }
.team a:hover b { text-decoration: underline; text-decoration-color: var(--peach); text-decoration-thickness: 2px; }

/* βιβλίο */
.book { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; align-items: center; }
.plate { position: relative; }
.plate::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--mint); }
.plate img { position: relative; }
.facts { margin: 1.5rem 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1.4rem; font-size: 1rem; }
.facts dt { color: var(--mute); }
.facts dd { margin: 0; }

/* τελευταία κείμενα και λίστα κειμένων */
.posts { list-style: none; padding: 0; margin: 0; }
.posts li { border-top: 1px solid var(--line); padding: 1.3rem 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
.posts li:last-child { border-bottom: 1px solid var(--line); }
.posts time { color: var(--mute); font-size: .9rem; }
.posts a { font-size: 1.6rem; line-height: 1.35; text-decoration: none; }
.posts a:hover { text-decoration: underline; text-decoration-color: var(--peach); }

/* επικοινωνία */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.tel { display: block; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 400; color: var(--petrol); text-decoration: none; line-height: 1.25; }
.tel:hover { color: var(--teal); }
.addr { font-size: 1.15rem; }

/* εσωτερικές σελίδες */
.head { padding: 4.5rem 0 1rem; position: relative; }
.head p { color: var(--mute); max-width: 40rem; font-size: 1.2rem; }
.head .mini { position: absolute; right: 2rem; top: 2.5rem; width: 150px; opacity: .9; }
.bio { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 3.5rem; padding: 4rem 0; border-top: 1px solid var(--line); }
.bio .ph { align-self: start; position: sticky; top: 2rem; }
.bio img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.bio .role { color: var(--teal); margin-bottom: 1.6rem; font-size: 1.05rem; }
.bio .txt { max-width: 42rem; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 1rem 0 1rem 3.4rem; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: .95rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--mint); color: var(--petrol); display: grid; place-items: center; font-weight: 500; font-size: 1rem; }
.article { max-width: 42rem; }
.article h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.article .meta { color: var(--mute); margin-bottom: 2.5rem; font-size: .95rem; }
.article h3 { color: var(--teal); }
.article blockquote { margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem; border-left: 3px solid var(--peach); color: var(--mute); }
.article ul, .article ol { padding-left: 1.3rem; }
.article li { margin-bottom: .45rem; }
.article li::marker { color: var(--teal); }

/* κάτω μέρος */
.foot { margin-top: 2rem; padding: 3rem 0 2.5rem; font-size: .95rem; color: var(--mute); }
.foot .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; }
.foot .sig { color: var(--petrol); }
.foot .sig img { width: 120px; margin-bottom: .6rem; }
.foot .sig .onoma { width: 240px; }
.foot nav { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.foot a { color: var(--mute); }
.foot small { display: block; margin-top: 1.5rem; }

/* ---------- κινητό ---------- */
@media (max-width: 900px) {
  .wrap { padding: 0 1rem; }
  body { font-size: 1.1875rem; }
  .brand .onoma { width: 170px; }
  .brand img { width: 38px; height: 38px; }
  .nav { gap: .1rem 1.1rem; font-size: .95rem; }
  .hero { min-height: 0; display: block; }
  .hero .spiral { position: relative; right: auto; top: auto; translate: none; width: 118%; margin: 0 -9% -2rem auto; }
  .hero .txt { padding: 0 0 3rem; }
  .sec { padding: 4rem 0; }
  .two, .whom, .book, .contact, .bio { grid-template-columns: 1fr; gap: 2rem; }
  .two > :first-child h2 { position: static; }
  .whom svg { display: none; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .ph::after { right: -6px; top: -6px; width: 18px; height: 18px; }
  .posts li { grid-template-columns: 1fr; gap: .2rem; }
  .bio .ph { position: relative; top: 0; max-width: 15rem; }
  .head .mini { display: none; }
  .plate::before { inset: 10px -10px -10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .spiral img { rotate: none; }
  .nav a { transition: none; }
}

/* Ποιον αφορά: στον υπολογιστή η σπείρα, η λίστα μένει για αναγνώστες οθόνης. Στο κινητό η λίστα. */
@media (min-width: 901px) {
  .whom .whom-h, .whom > div > .whom-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}