/* Hero Story. Keeps the current brand: logo, green, sunny yellow, coral, rounded panels, pill buttons,
   yellow bands with circles. Type: Commissioner (warm flared terminals for headings) and Literata italic
   for the words of the people in the stories. Light theme on purpose: it is the brand's own look. */
:root {
  --green: #005528;
  --green-logo: #006B3C;
  --green-dark: #00431B;
  --green-soft: #E2F0E6;
  --yellow: #FED763;
  --yellow-soft: #FFF4D1;
  --cream: #FCE9C2;
  --coral: #F45B4E;
  --coral-dark: #C63A2E;
  --coral-soft: #FDE4E0;
  --ink: #08161D;
  --muted: #4B5B64;
  --line: #D0D9DE;
  --surface: #F3F8FA;
  --canvas: #FFFFFF;
  --stone: #E3E9EC;
  --stone-edge: #BCC8CE;
  --stone-fill: #F6C53B;
  --stone-fill-edge: #C9961A;
  --radius: 14px;
  --radius-sm: 9px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(8, 22, 29, .06), 0 8px 24px rgba(8, 22, 29, .07);
  --font: "Commissioner", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-quote: "Literata", Georgia, "Times New Roman", serif;
  --content: 1180px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  font-variation-settings: "FLAR" 0, "VOLM" 0;
}
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--green); text-underline-offset: 3px; }
p, ul, ol, figure, blockquote, h1, h2, h3, h4 { margin: 0; }
ul, ol { padding-left: 1.2em; }
li + li { margin-top: .35em; }
h1, h2, h3, h4 { line-height: 1.12; font-weight: 800; text-wrap: balance; font-variation-settings: "FLAR" 70, "VOLM" 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 5.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; }
strong, b { font-weight: 700; }
:is(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--content) + 32px); margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.narrow { max-width: 760px; }
.prose { display: grid; gap: 14px; max-width: 68ch; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.quote { font-family: var(--font-quote); font-style: italic; font-weight: 500; }

/* Prototype strip */
.proto { background: var(--ink); color: #fff; font-size: .85rem; text-align: center; padding: 7px var(--gutter-r) 7px var(--gutter-l); }
.proto b { color: var(--yellow); }

/* Header: frosted glass that turns see-through once the page scrolls down (app.js adds .scrolled) */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--canvas); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); transition: background .35s ease, border-color .35s ease; }
.site-header.scrolled { background: rgba(255, 255, 255, .52); -webkit-backdrop-filter: saturate(1.7) blur(14px); backdrop-filter: saturate(1.7) blur(14px); border-bottom-color: transparent; }
.site-header.scrolled:hover, .site-header.scrolled:focus-within, .site-header.menu-open { background: rgba(255, 255, 255, .96); }
.site-header .bar { display: flex; align-items: center; gap: 20px; min-height: 80px; }
.logo { display: inline-flex; flex: none; }
.logo img { height: 64px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); margin-left: auto; font-weight: 600; font-size: .95rem; }
.nav a { color: var(--ink); text-decoration: none; padding: 8px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--green); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--yellow); }
.nav a.btn, .nav a.btn:hover { color: #fff; padding: 9px 18px; box-shadow: none; white-space: nowrap; }
.lang { flex: none; display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: .82rem; letter-spacing: .05em; color: var(--ink); text-decoration: none; border: 1.5px solid var(--line); border-radius: var(--pill); padding: 6px 12px 6px 9px; line-height: 1.2; }
.lang:hover { border-color: var(--green); color: var(--green); }
.lang .flag { display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(8, 22, 29, .14); }
/* Phone menu button: three lines in a green circle, they turn into ✕ while the menu is open */
.menu-btn { display: none; flex: none; width: 46px; height: 46px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--green); color: #fff; cursor: pointer; transition: background .15s; }
.menu-btn:hover { background: var(--green-dark); }
.menu-btn:focus-visible { border-radius: 50%; }
.burger { position: relative; width: 18px; height: 14px; }
.burger i { position: absolute; left: 0; top: 6px; width: 100%; height: 2.2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
.burger i:nth-child(1) { transform: translateY(-5.8px); }
.burger i:nth-child(3) { transform: translateY(5.8px); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(1) { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .burger i:nth-child(3) { transform: rotate(-45deg); }
/* «Χρειάζεσαι βοήθεια;» at the top of every page: straight to the «Αν κινδυνεύεις τώρα» numbers */
.need-help { flex: none; font-weight: 700; font-size: .86rem; color: var(--coral-dark); text-decoration: none; white-space: nowrap; }
.need-help:hover { text-decoration: underline; text-underline-offset: 3px; }
#sos, #katebasma { scroll-margin-top: 100px; }
@media (max-width: 900px) {
  .logo img { height: 48px; }
  .site-header .bar { min-height: 62px; gap: 10px; flex-wrap: wrap; padding-block: 7px; }
  .lang { margin-left: auto; }
  /* the phone: the logo and «Χρειάζεσαι βοήθεια;» on the left, the language and the menu on the right */
  .site-header .need-help { font-size: .78rem; white-space: normal; max-width: 7.5em; line-height: 1.15; background: var(--coral-soft); border-radius: 10px; padding: 5px 9px; }
  .menu-btn { display: inline-flex; }
  .nav { order: 5; display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0 0 12px; }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 4px; border-top: 1px solid var(--line); }
  .nav a.btn, .nav a.btn:hover { margin-top: 10px; justify-content: center; border-top: 0; padding: 13px 18px; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 0; border-radius: var(--pill); padding: 13px 24px; background: var(--green); color: #fff; cursor: pointer; transition: background .15s, transform .15s; }
.btn:hover { background: var(--green-dark); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 9px 16px; font-size: .92rem; }
.btn-give { padding: 12px 24px; font-size: 1.02rem; }
.btn-lg { padding: 16px 32px; font-size: 1.12rem; }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: #F7CB44; }
.btn-ghost { background: transparent; color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.btn-ghost:hover { background: var(--green-soft); }
.btn-coral { background: var(--coral); }
.btn-coral:hover { background: var(--coral-dark); }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-arrow { font-weight: 700; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; padding: 4px 11px; border-radius: var(--pill); background: var(--surface); color: var(--ink); white-space: nowrap; }
.chip.open { background: var(--green-soft); color: var(--green); }
.chip.covered { background: var(--yellow-soft); color: #7A5A00; }
.chip.done { background: var(--ink); color: #fff; }
.chip.deadline { background: var(--coral-soft); color: var(--coral-dark); }
.chip.num { background: rgba(255, 255, 255, .85); color: var(--ink); }
.chip.example { background: #fff; color: var(--coral-dark); box-shadow: inset 0 0 0 1.5px var(--coral); }
.chip.action { background: var(--yellow); color: var(--ink); }
.chip.soft { background: var(--surface); color: var(--muted); }

/* Sections */
.section { padding-block: clamp(52px, 8vw, 88px); }
.section.alt { background: var(--surface); }
.section-head { display: grid; gap: 12px; margin-bottom: 30px; max-width: 760px; }
.section-head.row { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }

/* Hero: «Όλοι μαζί γερά» close under the menu, the two buttons, then the open stories (no other content here:
   the homepage keeps only what is not on the other pages) */
.hero { position: relative; overflow: hidden; padding-block: clamp(22px, 3.6vw, 44px) clamp(34px, 5.5vw, 64px); }
/* the logo, faint (10%), whole behind the title and the buttons (Σωκράτης, 2026-10-27) */
.hero::before { content: ""; position: absolute; inset: 4% 0; background: url(brand/hero-story-mark.png) no-repeat center / contain; opacity: .1; pointer-events: none; }
.hero-text { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; text-align: center; }
.hero-text h1 { font-size: clamp(2.9rem, 9.7vw, 6.5rem); font-weight: 900; line-height: .98; letter-spacing: -.035em; font-variation-settings: "FLAR" 80, "VOLM" 0; }
@media (min-width: 900px) { html[lang="en"] .hero-text h1 { font-size: clamp(2.9rem, 9.31vw, 6.24rem); } }  /* «Stronger Together»: 4% smaller on a computer */
.hero-text h1 .h1-accent { color: var(--green); }
.hero-sub { font-size: clamp(1.2rem, 2.6vw, 1.65rem); font-weight: 700; line-height: 1.3; }
.hero-sub-line { display: block; }
.hero-text .actions { justify-content: center; margin-top: 4px; }
/* λιθαράκια floating around «Όλοι μαζί γερά»: flat, a little uneven pebbles, not balls (Σωκράτης, 2026-10-27) */
.hero .bubble { position: absolute; z-index: 0; pointer-events: none; opacity: .62;
  background: radial-gradient(110% 100% at 32% 26%, #FFF0BF 0%, var(--stone-fill) 55%, #E7B12E 100%);
  border-radius: 58% 42% 55% 45% / 50% 44% 56% 50%;
  box-shadow: inset -2px -3px 0 rgba(201, 150, 26, .35), 0 8px 18px -6px rgba(201, 150, 26, .35); }
.hero .bubble:nth-of-type(1) { width: 120px; height: 84px; left: -44px; top: 40px; }
.hero .bubble:nth-of-type(2) { width: 58px; height: 41px; right: 14%; top: 28px; border-radius: 45% 55% 42% 58% / 58% 46% 54% 42%; rotate: 16deg; }
.hero .bubble:nth-of-type(3) { width: 78px; height: 54px; left: 12%; bottom: 24px; border-radius: 54% 46% 62% 38% / 46% 56% 44% 54%; rotate: -12deg; }
.hero .bubble:nth-of-type(4) { width: 46px; height: 32px; right: 8%; bottom: 64px; border-radius: 40% 60% 52% 48% / 56% 42% 58% 44%; rotate: 24deg; }
@media (max-width: 560px) {  /* the phone: a little further in, whole, so they read as pebbles; where one meets a word,
                                 the word stays in front (.hero-text sits above them). Σωκράτης's pick: draft Α, 2026-10-29 */
  .hero .bubble:nth-of-type(1) { width: 72px; height: 50px; left: 5%; top: 4px; }
  .hero .bubble:nth-of-type(2) { width: 46px; height: 32px; right: 8%; top: 64px; }
  .hero .bubble:nth-of-type(3) { width: 60px; height: 42px; left: 5%; bottom: 46px; }
  .hero .bubble:nth-of-type(4) { width: 38px; height: 27px; right: 6%; top: 150px; bottom: auto; }
}
.stones-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-end; }
.campaigns { padding-top: clamp(24px, 4vw, 44px); }
.campaigns .cards { grid-template-columns: repeat(auto-fit, minmax(290px, 380px)); justify-content: center; }
.campaigns .section-head { max-width: none; justify-items: center; text-align: center; }

/* Steps */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.steps li { margin: 0; counter-increment: step; display: grid; gap: 10px; align-content: start; padding-top: 6px; }
.steps .stone-num { width: 58px; height: 44px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: var(--ink); background: var(--stone-fill); border-radius: 60% 40% 54% 46% / 55% 48% 52% 45%; }
.steps li:nth-child(2) .stone-num { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; }
.steps li:nth-child(3) .stone-num { border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%; }
.steps li:nth-child(4) .stone-num { border-radius: 42% 58% 48% 52% / 58% 46% 54% 42%; background: var(--green); color: #fff; }
.steps p { color: var(--muted); font-size: .97rem; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {  /* the phone: all four steps on one screen, the number beside the text */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .steps li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding-top: 0; }
  .steps li .stone-num { grid-row: span 2; width: 44px; height: 34px; font-size: 1rem; box-shadow: none; }
  .steps h3 { font-size: 1rem; }
  .steps p { font-size: .86rem; line-height: 1.4; }
}

/* Story cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
@media (max-width: 560px) {  /* the phone: cards 12% smaller (width, picture and text), easier to read through */
  .cards, .campaigns .cards { grid-template-columns: minmax(0, 88%); justify-content: center; gap: 16px; }
  .card-body { padding: 14px 15px 16px; gap: 8px; }
  .card .quote { font-size: .99rem; }
  .card .who { font-size: .82rem; }
  .card .what { font-size: .86rem; }
  /* …and short enough to fit the screen whole, from the picture down to «Βάλε λιθαράκι» (2026-10-27) */
  .card .art { aspect-ratio: 2 / 1; }
  .card-body { padding: 11px 13px 13px; gap: 6px; }
  .card .quote { font-size: .95rem; }
  .card .progress .stones-row { gap: 2px; }
  .card .progress .stone { width: 11px; height: 8.5px; }  /* all 20 in one row on a 390px phone */
  .card .progress .nums { font-size: .88rem; }
  .card .progress .nums b { font-size: 1rem; }
  .card.after .ba { font-size: .83rem; gap: 5px; line-height: 1.42; }
  .card.after .ba p { grid-template-columns: 50px minmax(0, 1fr); }
  .card.after .ba b { font-size: .7rem; }
  .card-foot { margin-top: 2px; }
}
.card { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 1px 2px rgba(8, 22, 29, .04); transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* The pictures of a story or action: a row of slides (photo, gallery) that swipes, with a ▶ bottom right */
.art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.art::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -18%; bottom: -40%; background: rgba(255, 255, 255, .35); }
.art[data-href] { cursor: pointer; }
.slides { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: 0; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.slide .portrait { position: absolute; left: 50%; bottom: -3%; height: 106%; width: auto; max-width: none; transform: translateX(-50%); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.card:hover .slide .portrait { transform: translateX(-50%) scale(1.04); }
.slide .photo, .slide .scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide figcaption { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 76px); font-size: .78rem; font-weight: 600; line-height: 1.3; background: rgba(255, 255, 255, .92); color: var(--ink); padding: 5px 10px; border-radius: 10px; }
.slides[data-slider] figcaption { bottom: 34px; }
.art-top { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 70px); }
.art .need { position: absolute; right: 12px; top: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(8, 22, 29, .14); }
.art .play { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 50px; height: 50px; border: 0; border-radius: 50%; background: rgba(8, 22, 29, .86); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(8, 22, 29, .28); transition: transform .15s, background .15s; }
.art .play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.art .play:hover { transform: scale(1.08); background: var(--green); }
.art.big { aspect-ratio: 16 / 10; border-radius: var(--radius); }
.art.big .play { width: 66px; height: 66px; right: 16px; bottom: 16px; }
.art.big .play svg { width: 26px; height: 26px; }
.art .cap { position: absolute; right: 14px; top: 14px; z-index: 2; font-size: .78rem; font-weight: 600; background: rgba(255, 255, 255, .92); padding: 6px 12px; border-radius: 12px; max-width: min(46%, 300px); line-height: 1.35; }
.sl-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; display: flex; gap: 5px; padding: 5px 8px; border-radius: var(--pill); background: rgba(8, 22, 29, .38); pointer-events: none; }
.sl-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background .2s, transform .2s; }
.sl-dots i.on { background: #fff; transform: scale(1.2); }
.sl-btn { position: absolute; top: 50%; z-index: 3; width: 36px; height: 36px; margin-top: -18px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); font: inherit; font-size: 1.3rem; font-weight: 800; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(8, 22, 29, .2); opacity: 0; transition: opacity .2s; }
.sl-prev { left: 10px; }
.sl-next { right: 10px; }
.art:hover .sl-btn, .sl-btn:focus-visible, .art.big .sl-btn { opacity: 1; }
.sl-btn[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .sl-btn { display: none; } }
.art .need .icon { width: 24px; height: 24px; stroke-width: 3.2; }
.tone-yellow { background: var(--yellow); }
.tone-cream { background: var(--cream); }
.tone-green { background: #CDE7D6; }
.tone-coral { background: var(--coral-soft); }
.icon { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.card-body { padding: 18px 18px 20px; display: grid; gap: 10px; flex: 1; align-content: start; }
.card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card .quote { font-size: 1.12rem; line-height: 1.35; }
.card .who { color: var(--muted); font-size: .92rem; }
.card .what { font-size: .95rem; font-weight: 600; }
.card-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; margin-top: 6px; }
.card .stretch { text-decoration: none; color: inherit; }
.card .stretch:hover .quote { text-decoration: underline; text-decoration-thickness: 1px; }

.progress { display: grid; gap: 6px; }
.progress .stones-row { gap: 3px; }
.progress .nums { font-variant-numeric: tabular-nums; font-size: .95rem; }
.progress .nums b { font-size: 1.1rem; }
.stone path { fill: var(--stone); stroke: var(--stone-edge); stroke-width: 1.2; }
.stone.on path { fill: var(--stone-fill); stroke: var(--stone-fill-edge); }
.stone.mine path { fill: var(--coral); stroke: var(--coral-dark); }
.stone.drop { animation: drop .55s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes drop { from { transform: translateY(-16px); } to { transform: none; } }

.card.after .ba { display: grid; gap: 8px; font-size: .95rem; }
.card.after .ba p { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.card.after .ba b { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.card.after .ba p.now b { color: var(--green); }

.card.act .act-title { font-size: 1.15rem; line-height: 1.3; }
.card .result { font-size: .93rem; }
.card .result b { color: var(--green); margin-right: 4px; }
.card .upd { font-size: .85rem; color: var(--muted); }

/* The stories page tabs: each on its own light background; the one picked lights up softly, like «Η αγάπη φωτίζει».
   Four in a row, two by two on the phone (never 3 + 1). */
.filters { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 10px; }
.filters button { font: inherit; font-weight: 700; font-size: .95rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--pill); padding: 10px 20px; cursor: pointer; transition: background .3s, border-color .3s, box-shadow .5s; }
.filters button:hover { border-color: var(--stone-edge); background: #EAF2F5; }
.filters button[aria-pressed="true"] { background: #FFF3CF; border-color: #F2CF68; box-shadow: 0 0 14px 2px rgba(254, 215, 99, .5), 0 0 36px 8px rgba(254, 215, 99, .16); }
@media (max-width: 560px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters button { padding: 10px 8px; }
}
.filters ~ .cards { margin-top: 22px; }  /* a little air between the tabs and the stories */
.section.tight { padding-top: clamp(22px, 3vw, 34px); }  /* the stories page: tabs close under the title */
.page-head.tight { padding-bottom: clamp(26px, 3.5vw, 40px); }

.tab-note { margin-top: 14px; color: var(--muted); max-width: 70ch; }
.tab-empty { margin-top: 20px; color: var(--muted); }
.open-empty { display: grid; gap: 16px; justify-items: start; max-width: 760px; padding: clamp(18px, 3vw, 26px); background: var(--yellow-soft); border-radius: var(--radius); color: var(--ink); }
.open-empty p { font-size: 1.12rem; font-weight: 600; line-height: 1.45; }
/* «Ξέρεις κάποιον που χρειάζεται βοήθεια;» under the stories: the question on one line, «Πες μας την ιστορία του» and
   the rest together on the next (on the phone too) */
.know { margin-top: 34px; display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 1.02rem; background: var(--coral-soft); border-radius: var(--radius); padding: 18px 20px; }
.know a { font-weight: 700; color: var(--coral-dark); }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile { display: grid; gap: 6px; align-content: start; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.tile:hover { border-color: var(--green); box-shadow: var(--shadow); }
.tile h3 { font-size: 1.1rem; }
.tile p { color: var(--muted); font-size: .93rem; }
.tile .go { font-weight: 700; color: var(--green); font-size: .92rem; margin-top: 4px; }
.tile.first { background: var(--green); color: #fff; border-color: var(--green); }
.tile.first p { color: #D7EBDD; }
.tile.first .go { color: var(--yellow); }
.tiles:not(.duo) > .tile.first { grid-row: span 2; align-content: center; padding: 24px; }  /* five tiles fill two full rows */
.tile.first h3 { font-size: 1.35rem; }
.tile.first p { font-size: 1rem; }
.tiles.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
/* «Ψάχνουμε τώρα»: who we need most right now, a wide tile above the others */
.tile.wanted { grid-column: 1 / -1; background: var(--yellow-soft); border-color: #F1D27A; padding: 20px 22px; }
.tile.wanted:hover { border-color: var(--green); }
.tile.wanted h3 { font-size: 1.3rem; }
.tile.wanted p { color: var(--ink); }
.chip.wanted { justify-self: start; background: var(--coral); color: #fff; }
@media (max-width: 520px) { .tiles:not(.duo) > .tile.first { grid-row: auto; } .tiles.duo { grid-template-columns: minmax(0, 1fr); } }

/* Founder: his 25-30 second video beside his words («Ποιοι είμαστε») */
.founder { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 60px); align-items: center; }
.founder-video { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--green-dark); border: 6px solid #fff; box-shadow: 0 18px 44px rgba(8, 22, 29, .22); }
.founder-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fv-soon { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 2px; background: rgba(255, 255, 255, .94); border-radius: 12px; padding: 10px 12px; font-size: .85rem; line-height: 1.35; }
.fv-soon b { color: var(--coral-dark); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.founder-note { display: grid; gap: 12px; margin: 0; }
.founder-note .quote { font-size: 1.22rem; line-height: 1.5; }
.founder-note .draft { justify-self: start; }
.draft { display: inline-block; font-size: .78rem; font-weight: 700; color: #7A5A00; background: var(--yellow-soft); padding: 2px 10px; border-radius: var(--pill); }
@media (max-width: 700px) { .founder { grid-template-columns: minmax(0, 1fr); } .founder-video { width: min(260px, 72%); justify-self: center; } }

/* Emergency numbers */
.sos { list-style: none; padding: 0; display: grid; gap: 6px; }
.sos li { margin: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.sos b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Story page */
.crumbs { font-size: .9rem; color: var(--muted); padding-top: 22px; }
.crumbs a { color: var(--muted); }
.story-top { display: grid; gap: 14px; padding-block: 14px 26px; }
.story-top h1 { font-family: var(--font-quote); font-style: italic; font-weight: 500; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.15; letter-spacing: 0; max-width: 24ch; }
/* A story without the person's own words is headed by what it needs: plain type, no quotation marks */
/* a story headed by its headline (none of the person's own words yet): the same type as every other title, only
   without «», so the finished stories all look alike (Σωκράτης, 2026-10-27) */
.story-top h1 .plain { font-size: .82em; }
.story-top .who { font-size: 1.05rem; color: var(--muted); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); grid-template-areas: "media side" "main side"; gap: clamp(24px, 4vw, 48px); align-items: start; padding-bottom: 72px; }
.story-grid > .media { grid-area: media; }
.story-main { grid-area: main; display: grid; gap: 34px; min-width: 0; }
.story-side { grid-area: side; align-self: start; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); display: grid; gap: 16px; min-width: 0; }
@media (max-width: 960px) { .story-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "side" "main"; } .story-side { position: static; } }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 44px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.media { min-width: 0; }
.act-h1 { font-family: var(--font); font-style: normal; font-weight: 800; }
.xl-note { font-size: .9rem; background: var(--yellow-soft); border-radius: 10px; padding: 8px 12px; max-width: 62ch; }
.panel { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; min-width: 0; }
.panel.soft { background: var(--surface); border-color: transparent; }
.panel.green { background: var(--green-soft); border-color: transparent; }
.panel.yellow { background: var(--yellow-soft); border-color: transparent; }
.panel h2 { font-size: 1.3rem; }
.needs { list-style: none; padding: 0; display: grid; }
.needs li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.needs li:first-child { border-top: 1px solid var(--line); }
.needs .amt { font-weight: 800; font-variant-numeric: tabular-nums; }
.needs small { grid-column: 1 / -1; color: var(--muted); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.paid { color: var(--green); font-weight: 700; }
.pending { color: #7A5A00; font-weight: 700; }
.story-text { display: grid; gap: 14px; font-size: 1.08rem; max-width: 66ch; }
.pull { font-family: var(--font-quote); font-style: italic; font-size: 1.35rem; line-height: 1.4; border-left: 4px solid var(--yellow); padding: 4px 0 4px 18px; }
.ask { background: var(--green); color: #fff; border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; }
.ask p { color: #DCEDE2; }
.ask .btn { justify-self: start; }
.outcome { background: var(--yellow); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; }
.outcome .ba { display: grid; gap: 10px; }
.outcome .ba p { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; font-size: 1.02rem; }
.outcome .ba b { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; padding-top: 4px; }
.journey { list-style: none; padding: 0; display: grid; }
.journey li { margin: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.journey .mark { display: flex; flex-direction: column; align-items: center; }
.journey .mark::after { content: ""; flex: 1; width: 2px; background: var(--line); min-height: 18px; margin-block: 4px; }
.journey li:last-child .mark::after { display: none; }
.journey .txt { display: grid; gap: 3px; padding-bottom: 20px; }
.journey time { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.journey h3 { font-size: 1.05rem; }
.checks { list-style: none; padding: 0; display: grid; gap: 10px; }
.checks li { margin: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.checks svg { width: 22px; height: 22px; stroke: var(--green); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.supporters { list-style: none; padding: 0; display: grid; gap: 8px; }
.supporters li { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: .95rem; }
.supporters .who { font-weight: 700; }
.supporters .msg { color: var(--muted); font-style: italic; }
.supporters .eur { font-variant-numeric: tabular-nums; font-weight: 700; }
.supporters li.me .who, .supporters li.me .eur { color: var(--coral-dark); }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share a, .share button { font: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: 8px 14px; cursor: pointer; }
.share a:hover, .share button:hover { border-color: var(--green); color: var(--green); }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--pill); font-weight: 600; font-size: .95rem; z-index: 40; box-shadow: var(--shadow); max-width: calc(100% - 32px); }
.toast[hidden] { display: none; }

/* Forms */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > label, .field > .label, legend { font-weight: 700; font-size: .95rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea {
  font: inherit; color: var(--ink); background: var(--canvas); border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 13px; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px var(--green-soft); }
textarea { min-height: 110px; resize: vertical; }
.hint { font-size: .85rem; color: var(--muted); }
.opts { display: grid; gap: 8px; }
.opts label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: .97rem; }
.opts input { margin-top: .32em; accent-color: var(--green); width: 18px; height: 18px; flex: none; }
.opts.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .opts.cols { grid-template-columns: minmax(0, 1fr); } }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: 4px; }
.seg button { flex: 1 1 auto; font: inherit; font-weight: 700; font-size: .92rem; border: 0; background: transparent; color: var(--muted); border-radius: var(--pill); padding: 8px 16px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--green); color: #fff; }
@media (max-width: 560px) {  /* the phone: the choices side by side, the full width, a long one on two lines inside its frame */
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: 16px; }
  .seg button { border-radius: 12px; padding: 9px 8px; line-height: 1.25; }
}
.amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }  /* four amounts, two by two (not 3 + 1) */
.amounts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) {
  .amounts.three .amount { text-align: center; padding: 12px 6px; }
  .amounts.three .amount span { display: none; }
}
.amount { font: inherit; text-align: left; display: grid; gap: 3px; background: var(--canvas); color: var(--ink); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px; cursor: pointer; }
.amount b { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.amount span { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.amount[aria-pressed="true"] { border-color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); background: var(--green-soft); }
.sum { background: var(--surface); border-radius: 10px; padding: 11px 13px; font-size: .97rem; }
.paylogos { display: flex; flex-wrap: wrap; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.paylogos span { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; background: var(--canvas); }
/* while the site is a prototype: the donate buttons charge nothing, said right under them (build.py pay_soon) */
.pay-soon { margin: 0; font-size: .85rem; font-weight: 700; line-height: 1.4; color: #7A5A00; background: var(--yellow-soft); border-radius: 10px; padding: 8px 12px; }
.formmsg { font-weight: 600; color: var(--green); }
.req { color: var(--coral-dark); font-weight: 700; }
[aria-invalid="true"] { border-color: var(--coral) !important; box-shadow: 0 0 0 3px var(--coral-soft) !important; }
.formmsg.err { color: var(--coral-dark); }
/* Turnstile (spam check) box: invisible unless Cloudflare asks for a click */
.ts { max-width: 100%; overflow: hidden; }
.newsletter .ts { flex-basis: 100%; }
.stepper { display: flex; flex-wrap: wrap; gap: 8px; }
.stepper span { font-size: .85rem; font-weight: 700; padding: 5px 12px; border-radius: var(--pill); background: var(--surface); color: var(--muted); }
.stepper span.on { background: var(--green); color: #fff; }
.expect { background: var(--surface); border-radius: 12px; padding: 14px 16px; }
.psy-note { padding: 0 4px; }
.exit { position: fixed; right: calc(env(safe-area-inset-right, 0px) + 14px); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 25; }

/* Ledger */
.month-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.month { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 6px; }
.month h3 { font-size: 1.05rem; }
.month dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: .93rem; }
.month dt { color: var(--muted); }
.month dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 640px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface); font-weight: 700; }
tr:last-child td { border-bottom: 0; }
td.n { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.principles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.principle { background: var(--green-soft); border-radius: var(--radius); padding: 18px; display: grid; gap: 6px; }
.principle h3 { font-size: 1.05rem; color: var(--green); }
.principle p { font-size: .95rem; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 15px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--green); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 16px; color: var(--muted); display: grid; gap: 8px; }

/* Page head */
.page-head { background: var(--surface); padding-block: clamp(40px, 6vw, 68px); position: relative; overflow: hidden; }
.page-head .wrap { display: grid; gap: 14px; position: relative; z-index: 1; }
.page-head .circle { position: absolute; border-radius: 50%; background: var(--yellow); }
@media (max-width: 640px) { .page-head .circle { transform: scale(.55); transform-origin: top right; } }

/* Footer */
.site-footer { background: var(--surface); padding-block: 48px 28px; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot-grid h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 10px; font-variation-settings: "FLAR" 0; }
.foot-grid ul { list-style: none; padding: 0; display: grid; gap: 7px; }
.foot-grid li { margin: 0; }
.foot-grid a { color: var(--ink); text-decoration: none; font-size: .95rem; }
.foot-grid a:hover { color: var(--green); text-decoration: underline; }
.foot-brand { display: grid; gap: 12px; align-content: start; }
.foot-brand img { height: 64px; width: auto; }
.foot-brand p { color: var(--muted); font-size: .95rem; max-width: 36ch; }
.newsletter { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter input { flex: 1 1 200px; }
.foot-legal { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .85rem; color: var(--muted); }
.foot-legal a { color: var(--muted); }
/* the donate page: no footer, only one line with who receives the gift, terms and privacy (Σωκράτης, 2026-10-27) */
.site-footer.slim { padding-block: 20px; }
.site-footer.slim .foot-legal { border-top: 0; margin-top: 0; padding-top: 0; justify-content: center; text-align: center; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* «Η αγάπη φωτίζει»: a night band. The real video circles (Σωκράτης and people from his videos, who agreed to
   appear) are its lights: they switch on one by one as it scrolls in, and a warm glow follows the pointer. */
.love { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% 115%, #123A2C 0%, var(--ink) 64%); color: #fff; padding-block: clamp(84px, 11vw, 140px); text-align: center; }
.love .glow { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: min(780px, 130vw); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.55); background: radial-gradient(circle, rgba(254, 215, 99, .22) 0%, rgba(254, 215, 99, .07) 38%, rgba(254, 215, 99, 0) 68%); opacity: 0; z-index: -1; pointer-events: none; transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.2, .7, .2, 1), left .9s ease-out, top .9s ease-out; }
.love.on .glow { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.love .wrap { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; }
.love-title { font-size: clamp(2.6rem, 8vw, 5.4rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: #E9E2CB; transition: color 1.6s ease, text-shadow 1.6s ease; }
.love.on .love-title { color: #fff; text-shadow: 0 0 14px rgba(254, 215, 99, .45), 0 0 40px rgba(254, 215, 99, .2); }
.love p { max-width: 50ch; font-size: 1.12rem; color: #D2DEE3; }
.light { position: absolute; z-index: 0; border-radius: 50%; overflow: hidden; background: var(--green-dark); border: 4px solid rgba(255, 246, 216, .85); opacity: .2; filter: grayscale(1) brightness(.55); transition: opacity 1s ease, filter 1s ease, box-shadow 1s ease; transition-delay: calc(var(--n, 0) * 240ms); }
.love.on .light { opacity: 1; filter: none; box-shadow: 0 0 22px 4px rgba(254, 215, 99, .3), 0 0 60px 12px rgba(254, 215, 99, .1); }
.light video { display: block; width: 100%; height: 100%; object-fit: cover; }
.light.l-1 { --n: 0; width: 200px; height: 200px; left: -40px; top: 40px; }
.light.l-2 { --n: 1; width: 112px; height: 112px; left: 14%; bottom: -26px; }
.light.l-3 { --n: 2; width: 240px; height: 240px; right: -50px; top: -40px; }
.light.l-4 { --n: 3; width: 104px; height: 104px; right: 16%; bottom: 28px; }
.light.l-5 { --n: 4; width: 82px; height: 82px; left: 24%; top: 32px; }
@media (max-width: 900px) {
  .light.l-1 { width: 120px; height: 120px; left: -40px; top: 16px; }
  .light.l-3 { width: 140px; height: 140px; right: -36px; top: -34px; }
  .light.l-4 { width: 86px; height: 86px; right: 6%; bottom: -26px; }
  .light.l-2, .light.l-5 { display: none; }
  .love .wrap { padding-top: 56px; }
}

/* Ticker of the latest stones */
.ticker { background: var(--yellow-soft); border-block: 1px solid #F3E2A5; overflow: hidden; }
.ticker .wrap { display: flex; align-items: center; gap: 16px; padding-block: 11px; }
.ticker .label { flex: none; display: inline-flex; gap: 8px; align-items: center; font-weight: 800; font-size: .85rem; }
.ticker .dot-live { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.ticker .track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker .items { display: flex; width: max-content; }
.ticker .grp { display: flex; gap: 30px; padding-right: 30px; }
.ticker .item { white-space: nowrap; font-size: .92rem; }
@media (max-width: 560px) { .ticker .label { font-size: 0; gap: 0; } }

/* Steps: a dashed path between the stones (drawn when it scrolls in) */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 29px; right: calc(25% - 20px); top: 27px; border-top: 3px dashed #E5C96F; transform-origin: left center; }
.steps li { position: relative; z-index: 1; }
.steps .stone-num { box-shadow: 0 0 0 6px var(--canvas); }
@media (max-width: 860px) { .steps::before { display: none; } }

/* Stones rain on the thank-you page */
.rain { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.rain i { position: absolute; top: -40px; width: 22px; height: 16px; border-radius: 60% 40% 54% 46% / 55% 48% 52% 45%; animation: fall var(--t, 2.2s) cubic-bezier(.3, .1, .6, 1) var(--d, 0s) both; }
@keyframes fall { to { transform: translateY(110vh) rotate(320deg); } }

/* Thank-you page, after a gift to a story: its card. The icon comes alive in its own way (the bulb lights up, the key
   turns, the shoe takes a step...) and the stones fill with the visitor's coral ones (app.js). */
.gift-card { display: flex; gap: 16px; align-items: center; max-width: 580px; margin-top: 20px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); animation: gift-in .5s ease both; }
.gift-icon { flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow-soft); transition: background .6s ease, box-shadow .8s ease; }
.gift-icon .icon { width: 40px; height: 40px; transition: stroke .6s ease, fill .6s ease, transform .8s cubic-bezier(.3, 1.4, .5, 1) .15s; }
.gift-icon .icon * { transition: fill .6s ease .15s; }
.gift-body { display: grid; gap: 8px; min-width: 0; }
.gift-title { font-size: .95rem; line-height: 1.35; }
.gift-after { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.mine { background: var(--coral-soft); color: var(--coral-dark); }
.gift-card.alive .gift-icon { background: var(--yellow); animation: gift-pop .6s cubic-bezier(.3, 1.5, .5, 1); }
.gift-card.alive [data-icon="bulb"] { background: var(--ink); box-shadow: 0 0 28px 8px rgba(254, 215, 99, .55); }
.gift-card.alive [data-icon="bulb"] .icon { stroke: var(--yellow); }
.gift-card.alive [data-icon="bowl"] .icon path:first-child,
.gift-card.alive [data-icon="bed"] .icon rect,
.gift-card.alive [data-icon="glasses"] .icon circle { fill: var(--canvas); }
.gift-card.alive [data-icon="bulb"] .icon path:first-child { fill: var(--yellow); }
.gift-card.alive [data-icon="key"] .icon { transform: rotate(-90deg); }
.gift-card.alive [data-icon="shoe"] .icon { animation: gift-step .45s ease-in-out .15s 2 alternate; }
.gift-card.alive [data-icon="coat"] .icon { transform-origin: 50% 12%; animation: gift-swing .9s ease-in-out .15s; }
.gift-card.alive [data-icon="person"] .icon, .gift-card.alive [data-icon="ticket"] .icon { animation: gift-hop .5s ease-out .15s 2; }
@keyframes gift-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes gift-pop { 50% { transform: scale(1.14); } }
@keyframes gift-step { from { transform: translateX(-5px) rotate(-6deg); } to { transform: translateX(5px) rotate(4deg); } }
@keyframes gift-swing { 25% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } }
@keyframes gift-hop { 40% { transform: translateY(-7px); } }
@media (max-width: 560px) { .gift-card { align-items: flex-start; padding: 12px 14px; } .gift-icon { width: 52px; height: 52px; } .gift-icon .icon { width: 32px; height: 32px; } }

/* «Γίνε χορηγός», after sending: the sender's name slides into the «Με τη στήριξη» row (app.js adds .in) */
.sponsor-slot { display: grid; gap: 10px; justify-items: center; text-align: center; border-top: 1px solid rgba(8, 22, 29, .1); padding-top: 14px; }
.sponsor-slot .sponsor-row { gap: 10px 14px; }
.sponsor-slot .sponsor { min-width: 104px; height: 54px; }
@media (max-width: 560px) { .sponsor-slot .sponsor { min-width: 84px; } .sponsor-slot .sponsor.empty + .sponsor.empty { display: none; } }
.sponsor-slot .mine { display: grid; gap: 1px; align-content: center; padding: 0 16px; border-radius: 12px; background: var(--canvas); box-shadow: inset 0 0 0 2px var(--yellow);
  opacity: 0; transform: translateX(26px) scale(.9); transition: opacity .45s ease, transform .7s cubic-bezier(.3, 1.5, .5, 1), box-shadow .6s ease; }
.sponsor-slot .mine b { font-size: .95rem; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sponsor-slot .mine small { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.sponsor-slot.in .mine { opacity: 1; transform: none; box-shadow: inset 0 0 0 2px var(--yellow), 0 6px 20px rgba(254, 215, 99, .55); }

/* «Γιατί το κάνουμε» (Ποιοι είμαστε): one paragraph with the two reasons in it. Each button marks its reason's
   words (app.js sets data-on="1", "2", or "all" once both have been shown). */
.why { padding-top: 0; }
.why-wrap { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line); padding-top: clamp(44px, 6vw, 70px); }
.why-text { font-size: clamp(1.15rem, 2.1vw, 1.4rem); line-height: 1.6; max-width: 48ch; color: var(--ink); transition: color .45s ease; }
.why-part { font-weight: 700; color: inherit; transition: color .45s ease, background-size .8s cubic-bezier(.6, .1, .2, 1);
  background: linear-gradient(transparent 58%, rgba(254, 215, 99, .9) 58%, rgba(254, 215, 99, .9) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.why[data-on="1"] .why-text, .why[data-on="2"] .why-text { color: var(--muted); }
.why[data-on="1"] [data-why-part="1"], .why[data-on="2"] [data-why-part="2"] { color: var(--ink); }
.why[data-on="all"] .why-part, .why[data-on="1"] [data-why-part="1"], .why[data-on="2"] [data-why-part="2"] { background-size: 100% 100%; }
.why-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.why-pick button { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 700; color: var(--ink); background: var(--canvas); border: 1.5px solid var(--line); border-radius: var(--pill); padding: 8px 18px 8px 8px; cursor: pointer; transition: border-color .2s, background .2s; }
.why-pick button b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow-soft); font-size: .9rem; transition: background .2s; }
.why-pick button:hover { border-color: var(--green); }
.why-pick button[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); }
.why-pick button[aria-pressed="true"] b { background: var(--yellow); }

/* «Στιγμές που μετράνε»: short silent loops from Σωκράτης's videos, like the first prototype's carousel.
   Real people who agreed to appear, so this band stays apart from the (fictional) story cards. */
.moments-band { position: relative; overflow: hidden; background: var(--green); color: #fff; padding-block: clamp(56px, 8vw, 92px); }
.moments-band .circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.moments-band .wrap { position: relative; z-index: 1; }
.moments-band .eyebrow { color: var(--yellow); }
.moments-band .lead { color: #D7EBDD; }
.moments { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.moments li { margin: 0; }
.moment { display: grid; gap: 10px; align-content: start; width: 100%; text-decoration: none; text-align: left; color: #fff; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.moment .clip { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--green-dark); border: 5px solid #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); transform: rotate(var(--tilt, 0deg)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.moments li:nth-child(odd) .clip { --tilt: -1.6deg; }
.moments li:nth-child(even) .clip { --tilt: 1.4deg; }
.moment:hover .clip, .moment:focus-visible .clip { transform: rotate(0deg) translateY(-4px); }
.moment video { display: block; width: 100%; height: 100%; object-fit: cover; }
.moment .tag { position: absolute; left: 10px; top: 10px; display: inline-flex; gap: 5px; align-items: center; font-size: .75rem; font-weight: 700; background: rgba(8, 22, 29, .72); color: #fff; padding: 4px 10px 4px 8px; border-radius: var(--pill); }
.moment .tag svg { width: 12px; height: 12px; fill: #fff; }
.moment .quote { font-size: 1.06rem; line-height: 1.35; padding-top: 6px; }
.moment .by { font-size: .86rem; color: #BFDCC8; }
.moments-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; color: #D7EBDD; }
.moments-foot a { color: var(--yellow); font-weight: 700; }
@media (max-width: 860px) {
  .moments { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 6px 16px; margin-inline: -6px; scrollbar-width: none; }
  .moments::-webkit-scrollbar { display: none; }
  .moments li { scroll-snap-align: start; }
}

/* Homepage: «Λιθαράκι χωρίς χρήματα», one sentence that opens its page, in three lines: «Δεν έχεις χρήματα;», then
   the key phrase whole on a line of its own, then what you can give (Σωκράτης, 2026-10-27) */
.lithari { padding-block: clamp(26px, 4vw, 44px); }
.lx-line { display: flex; align-items: center; justify-content: center; gap: 16px; max-width: 640px; margin-inline: auto; text-align: center; font-size: clamp(1.02rem, 1.8vw, 1.2rem); line-height: 1.4; color: var(--ink); text-decoration: none; background: var(--yellow-soft); border-radius: var(--radius); padding: 16px 26px; transition: background .2s, transform .2s; }
.lx-text { display: grid; gap: 2px; min-width: 0; }
.lx-text > span { display: block; text-wrap: balance; }
.lx-key { white-space: nowrap; }
.lx-line b { color: var(--green); }
.lx-line .go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; }
.lx-line:hover { background: var(--yellow); transform: translateY(-1px); }
@media (max-width: 560px) {  /* a little smaller on the narrowest phones, so the key phrase still fits its line */
  .lx-line { font-size: min(1.02rem, 4.6vw); padding: 14px 14px 14px 18px; gap: 10px; }
  .lx-line .go { width: 30px; height: 30px; }
}

/* Floating «Βάλε το λιθαράκι σου» / «Δες τις ιστορίες» (app.js shows them once the page has scrolled) */
.fab { position: fixed; z-index: 35; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); display: flex; gap: 8px; padding: 7px; background: rgba(255, 255, 255, .97); border: 1px solid var(--line); border-radius: var(--pill); box-shadow: 0 12px 32px rgba(8, 22, 29, .2); transform: translate(-50%, 150%); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .25s ease; }
.fab.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.fab .btn { white-space: nowrap; padding: 12px 22px; }
.site-footer.has-fab { padding-bottom: 104px; }
.fab.on ~ .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
@media (max-width: 560px) {
  .fab { left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); transform: translateY(150%); }
  .fab.on { transform: none; }
  .fab .btn { flex: 1 1 0; padding: 12px 8px; font-size: .95rem; }
}

/* Cookie banner: refusing is as easy as accepting (same look, same size) */
.cookies { position: fixed; z-index: 45; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%); width: min(720px, calc(100% - 20px)); display: grid; gap: 10px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(8, 22, 29, .24); padding: 18px 20px; }
.cookies h2 { font-size: 1.05rem; }
.cookies p { font-size: .93rem; color: var(--muted); }
.cookies .actions .btn { flex: 1 1 180px; }
.btn-choice { background: var(--canvas); color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.btn-choice:hover { background: var(--green-soft); }
.linkish { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--green); }

/* Donate buttons: «Βάλε το λιθαράκι σου» flips to «Δωρεά» on hover, and on a tap while the page loads (app.js,
   .flipped). Pressing any button lights it up; a donate button also sends out a flash of light (.lightburst). */
.btn-give { position: relative; display: inline-grid; place-items: center; perspective: 600px; }
.btn-give .face { grid-area: 1 / 1; display: block; white-space: nowrap; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .42s cubic-bezier(.3, 1.3, .5, 1), opacity .22s ease; }
.btn-give .face.back { transform: rotateX(-90deg); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .btn-give:hover .face:not(.back), .btn-give:focus-visible .face:not(.back) { transform: rotateX(90deg); opacity: 0; }
  .btn-give:hover .face.back, .btn-give:focus-visible .face.back { transform: none; opacity: 1; }
  .btn-give:hover { box-shadow: 0 0 14px rgba(254, 215, 99, .4); }
}
.btn-give.flipped .face:not(.back) { transform: rotateX(90deg); opacity: 0; }
.btn-give.flipped .face.back { transform: none; opacity: 1; }
.btn:active { box-shadow: 0 0 0 3px rgba(254, 215, 99, .5); }
/* The flash: a small soft glow around the press (2026-10-25: toned down from a screen-wide flash) */
.lightburst { position: fixed; z-index: 60; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 246, 200, .8) 0%, rgba(254, 215, 99, .4) 40%, rgba(254, 215, 99, 0) 70%); animation: burst .6s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes burst { from { transform: scale(.3); opacity: .85; } to { transform: scale(7); opacity: 0; } }

/* The ▶ viewer: the video, and the story beside it, coming in piece by piece */
.viewer { border: 0; padding: 0; margin: auto; width: min(1080px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); background: var(--canvas); color: var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.viewer::backdrop { background: rgba(8, 22, 29, .8); }
.viewer[open] { animation: vw-in .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes vw-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.vw-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); max-height: calc(100dvh - 32px); }
.vw-media { position: relative; display: grid; place-items: center; min-height: 380px; background: #0B1418; }
.vw-media video { display: block; width: 100%; height: 100%; max-height: calc(100dvh - 32px); object-fit: contain; background: #0B1418; }
.vw-media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.vw-side { position: relative; overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 30px 26px 26px; }
.vw-side::before { content: ""; position: absolute; width: 230px; height: 230px; right: -90px; top: -100px; border-radius: 50%; background: var(--yellow); opacity: .55; pointer-events: none; }
.vw-i { position: relative; opacity: 0; transform: translateX(22px); animation: vw-part .5s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(200ms + var(--i, 0) * 110ms); }
@keyframes vw-part { to { opacity: 1; transform: none; } }
.vw-quote { font-size: 1.4rem; line-height: 1.32; background: var(--yellow-soft); border-radius: 18px 18px 18px 4px; padding: 14px 16px; }
.vw-title { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.vw-who { color: var(--muted); font-size: .95rem; }
.vw-text { display: grid; gap: 10px; font-size: .98rem; }
.vw-result { display: grid; gap: 4px; background: var(--green-soft); border-radius: 12px; padding: 12px 14px; font-size: .95rem; }
.vw-result b { color: var(--green); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.vw-close { position: absolute; right: 12px; top: 12px; z-index: 5; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--ink); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); }
.vw-ph { position: relative; width: 100%; height: 100%; min-height: 380px; display: grid; }
.vw-art { position: absolute; inset: 0; overflow: hidden; }
.vw-art .portrait { position: absolute; left: 50%; bottom: -3%; height: 92%; width: auto; max-width: none; transform: translateX(-50%); }
.vw-art .photo, .vw-art .scene { width: 100%; height: 100%; object-fit: cover; }
.vw-msg { position: relative; z-index: 1; align-self: end; margin: 16px; display: grid; gap: 8px; justify-items: start; background: rgba(255, 255, 255, .95); border-radius: 14px; padding: 14px 16px; }
.vw-msg .btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 760px) {  /* the phone: full screen, the video on top and the story under it, scrolling together */
  .viewer { width: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; }
  .vw-grid { grid-template-columns: minmax(0, 1fr); max-height: none; }
  .vw-media { min-height: 0; }
  .vw-media video { max-height: 64dvh; }
  .vw-ph { min-height: 300px; }
  .vw-side { overflow: hidden; padding: 24px 18px 34px; }
  .vw-i { transform: translateY(16px); }
  .vw-close { position: fixed; }
}

/* Main sponsors, at the foot of the homepage */
.sponsors { padding-block: 34px 40px; border-top: 1px solid var(--line); }
.sponsors .wrap { display: grid; gap: 14px; justify-items: center; text-align: center; }
.sponsor-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.sponsor { display: grid; place-items: center; min-width: 140px; height: 64px; color: var(--ink); text-decoration: none; }
.sponsor img { max-height: 56px; max-width: 160px; width: auto; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.sponsor:hover img { filter: none; opacity: 1; }
.sponsor.empty { border: 1.5px dashed var(--line); border-radius: 12px; padding: 0 14px; color: var(--muted); font-size: .8rem; font-weight: 600; }

/* «Πώς δουλεύουμε» */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.promise { display: flex; gap: 14px; align-items: center; background: var(--green); color: #fff; border-radius: var(--radius); padding: 20px; font-weight: 600; }
.promise svg { flex: none; width: 40px; height: 40px; }
.promise .icon { stroke: #fff; }
.more-link { margin-top: 20px; }
.side-tiles { display: grid; gap: 14px; align-content: start; }
.partners { margin-top: 24px; max-width: 820px; }
@media (max-width: 860px) { .promises { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {  /* the phone: the three promises fit on one screen */
  .promises { gap: 8px; }
  .promise { padding: 11px 14px; gap: 11px; font-size: .9rem; line-height: 1.35; }
  .promise svg { width: 28px; height: 28px; }
}

/* «Διαφάνεια & Απολογισμοί»: only real figures; a missing one is a line to be filled in, never an estimate.
   Chart colours (validated for colour-blind readers): to people #1E7A4C, running costs #DDA11E. */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.subnav a { font-weight: 700; font-size: .9rem; text-decoration: none; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--pill); padding: 7px 14px; }
.subnav a:hover { border-color: var(--green); color: var(--green); }
@media (max-width: 560px) {  /* the phone: 2 × 2, not 3 + 1 */
  .subnav { display: grid; grid-template-columns: 1fr 1fr; }
  .subnav a { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 14px; padding: 8px 10px; line-height: 1.2; min-height: 46px; }
}
.fin { scroll-margin-top: 90px; }
.fin-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 28px; padding: 12px 14px; background: var(--surface); border-radius: 12px; }
.fin-filter label { font-weight: 700; }
.fin-filter select { width: auto; min-width: 210px; padding: 8px 12px; }
.fin-updated { margin-left: auto; color: var(--muted); font-size: .92rem; }
.fin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.fin-tile { display: grid; gap: 6px; align-content: start; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.fin-label { font-size: .9rem; font-weight: 600; color: var(--muted); }
.fin-value { min-height: 1.1em; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.05; color: var(--ink); }
.fin-sub { font-size: .84rem; line-height: 1.4; color: var(--muted); }
.fin-h3 { font-size: 1.1rem; margin: 32px 0 12px; }
.fin-empty { margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: var(--yellow-soft); font-size: .95rem; }
.fin-foot { margin-top: 12px; }
.blank { display: inline-block; width: 4.2em; height: .95em; border-bottom: 2px dashed #B6C3C9; vertical-align: baseline; }
.fin-value .blank { width: 3.2em; height: .85em; }
.mix { display: grid; gap: 10px; max-width: 760px; }
.mix-bar { display: flex; gap: 2px; height: 22px; }
.mix-bar span { min-width: 6px; border-radius: 4px; outline-offset: 2px; }
.seg-people { background: #1E7A4C; }
.seg-ops { background: #DDA11E; }
.mix-bar span:hover, .mix-bar span:focus-visible { filter: brightness(1.1); }
.mix.empty .mix-bar span { flex: 1; background: var(--stone); }
.mix-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .95rem; }
.mix-legend li { margin: 0; display: flex; align-items: center; gap: 8px; }
.sw { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.sw.people { background: #1E7A4C; }
.sw.ops { background: #DDA11E; }
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.kind { display: grid; gap: 6px; background: var(--green-soft); border-radius: var(--radius); padding: 18px; }
.kind h3 { font-size: 1.05rem; color: var(--green); }
.op-list { list-style: none; padding: 0; display: grid; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
.op-list li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 160px) 110px; gap: 6px 18px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.op-list li:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.op-list li > div { display: grid; gap: 2px; }
.op-list li .muted { font-size: .88rem; }
.op-list li.total { background: var(--surface); }
.op-bar { height: 10px; overflow: hidden; border-radius: 4px; background: var(--surface); }
.op-bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #DDA11E; }
.op-amt { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.op-notes { padding-left: 1.2em; display: grid; gap: 6px; font-size: .95rem; }
.month.empty, .year-card.empty { border-style: dashed; }
.month dd .blank { width: 3.2em; }
.year-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.year-card { display: grid; gap: 12px; align-content: start; max-width: 760px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.year-card dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
.year-card dd { margin: 0; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.year-card .btn { justify-self: start; }
.tip { position: fixed; z-index: 70; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; background: var(--ink); color: #fff; font-size: .85rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
@media (max-width: 760px) { .kinds { grid-template-columns: minmax(0, 1fr); } .fin-updated { margin-left: 0; } }
@media (max-width: 640px) { .op-list li { grid-template-columns: minmax(0, 1fr) auto; } .op-bar { grid-column: 1 / -1; grid-row: 2; } }

/* Donate page: the choices first, right under the title */
.give-page { position: relative; overflow: hidden; padding-block: clamp(26px, 4vw, 46px) clamp(52px, 8vw, 88px); background: linear-gradient(var(--surface), var(--surface)) top / 100% 230px no-repeat; }
.give-page .circle { position: absolute; border-radius: 50%; background: var(--yellow); }
.give-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 44px); align-items: start; }
.give-main { display: grid; gap: 12px; }
.give-main h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.give-main .form { margin-top: 6px; }
.give-side { display: grid; gap: 16px; align-content: start; padding-top: clamp(0px, 9vw, 120px); }
.bank-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; }
.bank-dl dt { padding-top: 2px; color: var(--muted); font-size: .9rem; }
.bank-dl dd { margin: 0; overflow-wrap: anywhere; }
.iban { letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.copy { margin-left: 6px; font: inherit; font-size: .8rem; font-weight: 700; color: var(--green); background: var(--green-soft); border: 0; border-radius: var(--pill); padding: 4px 10px; cursor: pointer; }
@media (max-width: 900px) { .give-grid { grid-template-columns: minmax(0, 1fr); } .give-side { padding-top: 0; } }

/* Motion: quiet and short. Nothing important waits on an animation, and reduced-motion turns it all off. */
.portrait .eye { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; animation-delay: var(--blink, 0s); }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.hero-sub .mark { background: linear-gradient(transparent 60%, rgba(254, 215, 99, .95) 60%, rgba(254, 215, 99, .95) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: mark 1.1s .5s cubic-bezier(.6, .1, .2, 1) forwards; }
/* «Όλοι μαζί γερά» lights up each time the homepage opens (or is refreshed), like «Η αγάπη φωτίζει», and goes out
   after a moment: a warm halo behind the words and a glow on them (Σωκράτης, 2026-10-27, the «Με φως» draft) */
.hero-text h1 { position: relative; animation: hero-glow 3.6s .3s ease both; }
.hero-text h1::before { content: ""; position: absolute; left: 50%; top: 52%; width: 124%; height: 230%; z-index: -1; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(254, 215, 99, .75), rgba(254, 215, 99, .34) 50%, rgba(254, 215, 99, 0) 100%);
  opacity: 0; transform: translate(-50%, -50%) scale(.6); animation: hero-light 3.6s .3s ease both; }
@keyframes hero-light { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 28%, 69% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes hero-glow { 0%, 100% { text-shadow: 0 0 16px rgba(254, 215, 99, 0), 0 0 40px rgba(254, 215, 99, 0); } 28%, 69% { text-shadow: 0 0 16px rgba(254, 215, 99, .6), 0 0 40px rgba(254, 215, 99, .3); } }
/* the logo on the homepage scrolls up without a reload: app.js takes the light off for a moment so it switches on again */
.hero-text h1.relight, .hero-text h1.relight::before { animation: none; }
@keyframes mark { to { background-size: 100% 100%; } }
.ticker .items { animation: marquee 48s linear infinite; }
.ticker:hover .items, .ticker:focus-within .items { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker .dot-live { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.steps.draw::before { animation: draw 1.6s cubic-bezier(.6, .1, .2, 1) both; }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.light { animation: float 11s ease-in-out infinite; }
.light:nth-of-type(2n) { animation-delay: -4s; animation-duration: 13s; }
.card:hover .need { animation: wiggle .6s ease; }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
.rv-wait { opacity: 0; transform: translateY(18px); }
.rv-in { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.stones-row.pop .stone.on { animation: pop .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes pop { from { transform: translateY(-14px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.journey li.rv-in .mark .stone { animation: pop .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d, 0ms); }
/* the pebbles float a little more than the lights: higher, with a slight sway (Σωκράτης, 2026-10-27) */
.hero .bubble { animation: pebble-float 7s ease-in-out infinite; }
.hero .bubble:nth-of-type(2) { animation-delay: -2.5s; animation-duration: 7.8s; }
.hero .bubble:nth-of-type(3) { animation-delay: -5s; animation-duration: 8.6s; }
.hero .bubble:nth-of-type(4) { animation-delay: -1.2s; animation-duration: 6.6s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pebble-float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(3px, -10px) rotate(4deg); }
  50% { transform: translate(0, -20px) rotate(0deg); } 75% { transform: translate(-3px, -10px) rotate(-4deg); } }
.toast:not([hidden]) { animation: toast-in .3s ease both; }
@keyframes toast-in { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.amount { transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.amount:active { transform: scale(.98); }
.btn:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  .rv-wait { opacity: 1; transform: none; }
  .stone.drop, .stones-row.pop .stone.on, .journey li.rv-in .mark .stone, .hero .bubble, .toast:not([hidden]), .light,
  .portrait .eye, .ticker .items, .ticker .dot-live, .steps.draw::before, .card:hover .need, .rain i, .viewer[open] { animation: none; }
  .vw-i { animation: none; opacity: 1; transform: none; }
  .hero-sub .mark { animation: none; background-size: 100% 100%; }
  .hero-text h1, .hero-text h1::before { animation: none; }  /* no light switching on and off */
  .rain, .lightburst { display: none; }
  .gift-card, .gift-icon, .gift-icon .icon, .gift-icon .icon *, .sponsor-slot .mine { animation: none !important; transition: none; }
  .card, .card:hover, .btn:hover, .card:hover .slide .portrait, .moment .clip, .lx-line, .site-header, .light, .love .glow, .love-title, .btn-give .face, .why-text, .why-part { transition: none; transform: none; }
  .btn-give .face.back { transform: none; }
  .fab, .burger i { transition: none; }
  .card:hover .slide .portrait { transform: translateX(-50%); }
}