/* Humera · v18 · «Μορφές συνεργασίας»: πέντε εναλλακτικές (?fx=1…5). Ίδιο περιεχόμενο, ίδια γραμματοσειρά (Β), ανοιχτό φόντο. */
html[data-fx="1"] .fv:not(.fv1), html[data-fx="2"] .fv:not(.fv2), html[data-fx="3"] .fv:not(.fv3), html[data-fx="4"] .fv:not(.fv4), html[data-fx="5"] .fv:not(.fv5) { display: none; }
.f18 { padding-bottom: clamp(24px, 4vh, 48px); }
.f18 h3 { margin: 0; font-family: var(--f-t, var(--f)); color: var(--ink); }
.f18 p { margin: 0; }
.f18 .eyebrow { margin-bottom: 16px; }

/* ---------- κοινά μικρά σχέδια ---------- */
.m-box { fill: rgba(255,255,255,.8); stroke: rgba(14,26,60,.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-echo { fill: none; stroke: rgba(14,26,60,.22); stroke-dasharray: 3 5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-time { stroke: rgba(14,26,60,.12); stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.m-mod.on { fill: var(--ink); } .m-mod.opt { fill: rgba(14,26,60,.1); }
.m-thread { fill: none; stroke: var(--ember); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-goal { fill: none; stroke: var(--ember); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .m-goal.in { fill: var(--ember); stroke: none; }
.m-band { fill: rgba(14,26,60,.055); }
.f18 .lit { opacity: 0; }
.f18 :is(.m-box, .m-echo, .m-p, .m-mod, .m-goal, .m-band, .m-one) { opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--o, 0) * 55ms + .1s); }
.is-on :is(.m-box, .m-echo, .m-p, .m-mod, .m-goal, .m-band, .m-one) { opacity: 1; }
.is-on .m-thread { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .4s; }
.m-one .lit { animation: f18lit 9s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); animation-play-state: paused; }
.is-live .m-one .lit { animation-play-state: running; }
.m-mod.opt { animation: f18all 11s ease-in-out infinite 3s; animation-play-state: paused; }
.is-live .m-mod.opt { animation-play-state: running; }
@keyframes f18lit { 0%, 70%, 100% { opacity: 0; } 78%, 88% { opacity: 1; } }
@keyframes f18all { 0%, 55%, 100% { fill: rgba(14,26,60,.1); } 64%, 86% { fill: rgba(14,26,60,.5); } }

/* ---------- 1 · Ευρετήριο (Athelas: λίστα με σταθερή στήλη · Instrument: η ένταση ακολουθεί την ανάγνωση) ---------- */
.v1 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 7vw, 128px); align-items: start; }
.v1-head { position: sticky; top: 132px; }
.v1-note { margin-top: 28px !important; max-width: 30ch; font-size: var(--s-body); line-height: var(--lh-body); color: var(--tx-2); }
.v1-list { list-style: none; margin: 0; padding: 0; }
.v1-row { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 40px; align-items: center; padding: clamp(36px, 6vh, 56px) 0; }
.v1-row + .v1-row { border-top: 1px solid var(--hair); }
.v1-txt h3 { font-size: clamp(1.75rem, 1.15rem + 1.7vw, 2.75rem); font-weight: 330; line-height: 1.04; letter-spacing: -.026em; color: rgba(14,26,60,.26); transition: color .6s var(--ease); }
.v1-txt p { margin-top: 16px !important; max-width: 38ch; font-size: var(--s-body); line-height: var(--lh-body); color: var(--tx-2); opacity: .45; transition: opacity .6s var(--ease); }
.v1-viz { opacity: .3; transition: opacity .6s var(--ease); } .v1-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.v1-row.cur h3 { color: var(--ink); } .v1-row.cur p, .v1-row.cur .v1-viz { opacity: 1; }

/* ---------- 2 · Κύκλοι (Hartregie: μεγάλη αχνή λέξη πίσω από τη σύνθεση) ---------- */
.fv2 { position: relative; overflow: hidden; padding: clamp(20px, 4vh, 48px) 0 clamp(80px, 12vw, 180px); }
.v2-mark { position: absolute; left: -1vw; bottom: 0; font-family: var(--f-t, var(--f)); font-size: 19vw; font-weight: 300; letter-spacing: -.045em; line-height: .8; color: rgba(14,26,60,.04); white-space: nowrap; pointer-events: none; user-select: none; }
.v2 { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 112px); align-items: center; }
.v2-dial svg { width: 100%; max-width: 560px; height: auto; display: block; overflow: visible; }
.v2-dial .track { fill: none; stroke: rgba(14,26,60,.08); stroke-width: 1; }
.v2-dial .seg { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.v2-dial .r2 .seg { stroke-width: 11; stroke-linecap: butt; }
.v2-dial .band { fill: none; stroke: rgba(14,26,60,.13); stroke-width: 11; opacity: 0; transition: opacity 1s var(--ease) .9s; }
.v2-dial .thread { fill: none; stroke: var(--ember); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.v2-dial .goal { fill: #F7F3EE; stroke: var(--ember); stroke-width: 1.5; opacity: 0; transition: opacity .5s 1.8s; } .v2-dial .goal.in { fill: var(--ember); stroke: none; }
.v2-dial .dot { fill: var(--ember); opacity: 0; transition: opacity .6s 1.6s; }
.v2-dial .orbit { transform-origin: 280px 280px; animation: f18spin 46s linear infinite; animation-play-state: paused; } .v2-dial .o2 { animation-duration: 71s; animation-delay: -30s; }
.fv2.is-live .orbit { animation-play-state: running; }
@keyframes f18spin { to { transform: rotate(360deg); } }
.v2-dial .core { opacity: 0; transition: opacity .6s .1s; }
.fv2.is-on .core, .fv2.is-on .v2-dial .band, .fv2.is-on .v2-dial .goal, .fv2.is-on .v2-dial .dot { opacity: 1; }
.fv2.is-on .v2-dial .seg { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.fv2.is-on .v2-dial .r0 .seg { transition-delay: .2s; } .fv2.is-on .v2-dial .r1 .seg { transition-delay: .55s; } .fv2.is-on .v2-dial .r2 .seg { transition-delay: .9s; }
.fv2.is-on .v2-dial .thread { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .8s; }
.v2-dial .ring, .v2-dial .track { transition: opacity .4s var(--ease); }
.fv2[data-hi="0"] .ring:not(.r0), .fv2[data-hi="1"] .ring:not(.r1), .fv2[data-hi="2"] .ring:not(.r2) { opacity: .16; }
.v2-legend { list-style: none; margin: clamp(28px, 4vh, 40px) 0 0; padding: 0; }
.v2-legend li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 18px; padding: 22px 0; border-top: 1px solid var(--hair); outline: none; transition: opacity .3s; }
.v2-legend:hover li:not(:hover) { opacity: .5; }
.v2-legend h3 { font-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem); font-weight: 380; line-height: 1.2; letter-spacing: -.016em; }
.v2-legend p { margin-top: 8px !important; font-size: var(--s-body); line-height: var(--lh-body); color: var(--tx-2); max-width: 40ch; }
.v2-sw { width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); }
.v2-sw--0 { background: conic-gradient(var(--ink) 0 40deg, rgba(14,26,60,.12) 40deg); }
.v2-sw--1 { background: repeating-conic-gradient(var(--ink) 0 22deg, rgba(14,26,60,.12) 22deg 50deg); }
.v2-sw--2 { background: var(--ink); }
.v2-note { margin-top: 24px !important; font-size: var(--s-body); line-height: var(--lh-body); color: var(--tx-2); max-width: 44ch; }

/* ---------- 3 · Αφήγηση με κύλιση (Instrument: σταθερή σκηνή, το κείμενο κυλά) ---------- */
.v3-head { max-width: 40rem; }
.v3-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 112px); }
.v3-step { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .6s var(--ease); }
.v3-step.on { opacity: 1; }
.v3-step h3 { font-size: clamp(1.75rem, 1.15rem + 1.7vw, 2.75rem); font-weight: 330; line-height: 1.04; letter-spacing: -.026em; }
.v3-step p { margin-top: 18px !important; font-size: var(--s-lead); font-weight: var(--w-lead); line-height: var(--lh-lead); color: var(--tx-2); max-width: 30ch; }
.v3-note { padding: 0 0 12vh; font-size: var(--s-body); line-height: var(--lh-body); color: var(--tx-2); max-width: 36ch; }
.v3-stage { position: sticky; top: 13vh; height: 74vh; display: flex; align-items: center; }
.v3-field, .v3-mob { width: 100%; } .v3-field svg, .v3-mob svg { width: 100%; height: auto; display: block; overflow: visible; }
.v3-mob { display: none; }
.fp > .p:first-child { opacity: .14; transition: opacity .6s var(--ease); transition-delay: calc(var(--d) * 9ms); }
.fp .lit { opacity: 0; }
.o0, .o0e, .t1, .g1 { opacity: 0; transition: opacity .5s var(--ease); }
.o0 { fill: rgba(255,255,255,.75); stroke: rgba(14,26,60,.14); vector-effect: non-scaling-stroke; }
.o0e { fill: none; stroke: rgba(14,26,60,.24); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.t1 { fill: none; stroke: var(--ember); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease), opacity .3s; }
.g1 { fill: none; stroke: var(--ember); stroke-width: 1.5; } .g1.in { fill: var(--ember); stroke: none; }
[data-state="0"] .fp.a0 > .p:first-child { opacity: 1; } [data-state="0"] :is(.o0, .o0e) { opacity: 1; }
[data-state="1"] .fp.a1 > .p:first-child { opacity: 1; } [data-state="1"] .t1 { opacity: 1; stroke-dashoffset: 0; } [data-state="1"] .g1 { opacity: 1; transition-delay: 1s; }
[data-state="2"] .fp > .p:first-child { opacity: .78; }
[data-state="2"] .fp .lit { animation: f18lit 8s ease-in-out infinite; animation-delay: calc(var(--d) * -.37s); }

/* ---------- 4 · Ψηφιδωτό (Argonstack: τρεις κάρτες με ρόλο · το πλάτος της κάρτας = διάρκεια) ---------- */
.v4-head { max-width: 40rem; }
.v4-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 5vh, 52px); }
.v4-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(24px, 2.6vw, 38px); border-radius: 24px; min-height: 340px; }
.v4-tile--single { grid-column: span 5; background: rgba(255,255,255,.72); border: 1px solid var(--glass-edge); box-shadow: 0 30px 60px -48px rgba(14,26,60,.35); }
.v4-tile--program { grid-column: span 7; background: rgba(14,26,60,.035); }
.v4-tile--continuous { grid-column: span 12; min-height: 0; background: rgba(255,255,255,.72); border: 1px solid var(--glass-edge); box-shadow: 0 30px 60px -48px rgba(14,26,60,.35); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: end; column-gap: 40px; }
.v4-txt h3 { font-size: clamp(1.375rem, 1.15rem + .6vw, 1.75rem); font-weight: 380; line-height: 1.15; letter-spacing: -.018em; }
.v4-txt p { margin-top: 12px !important; font-size: var(--s-body); line-height: var(--lh-body); color: var(--tx-2); max-width: 38ch; }
.v4-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.v4-note { margin-top: 28px !important; font-size: var(--s-body); line-height: var(--lh-body); color: var(--tx-2); }

/* ---------- 5 · Κλίμακα (Instrument: η τυπογραφία είναι το γραφικό · κλιμακωτή στοίχιση) ---------- */
.v5-head { max-width: 40rem; }
.v5-scale { list-style: none; margin: clamp(36px, 6vh, 72px) 0 0; padding: 0; }
.v5-item { margin-left: var(--ind); padding: clamp(18px, 3vh, 30px) 0 clamp(26px, 4vh, 40px); }
.v5-item--0 { --ind: 0%; } .v5-item--1 { --ind: 16%; } .v5-item--2 { --ind: 32%; }
.v5-item h3 { font-size: clamp(2.25rem, .9rem + 4.4vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -.038em; }
.v5-item p { font-size: var(--s-body); line-height: var(--lh-body); color: var(--tx-2); max-width: 40ch; }
.v5-line { position: relative; height: 22px; margin: 20px 0 14px; transform: scaleX(0); transform-origin: left center; transition: transform 1.3s var(--ease) .15s; }
.v5-item.is-on .v5-line { transform: none; }
.v5-line::before, .v5-line::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); }
.v5-line--single::before { left: 0; width: 72px; height: 2px; background: var(--ink); }
.v5-line--single::after { left: 70px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.v5-line--program::before { left: 0; width: min(520px, 62%); height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 28px, transparent 28px 40px); }
.v5-line--program::after { left: min(520px, 62%); width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ember); background: radial-gradient(circle, var(--ember) 0 3px, transparent 3.5px); margin-left: 6px; }
.v5-line--continuous { margin-right: calc(-1 * var(--gutter)); }
.v5-line--continuous::before { left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ink) 70%, rgba(14,26,60,0)); }
.v5-line--continuous::after { left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ember); animation: f18run 12s linear infinite; animation-play-state: paused; }
.v5-item.is-live .v5-line--continuous::after { animation-play-state: running; }
@keyframes f18run { from { left: 0; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } to { left: 88%; opacity: 0; } }
.v5-note { margin-top: 16px !important; font-size: var(--s-body); line-height: var(--lh-body); color: var(--tx-2); max-width: 44ch; margin-left: 32% !important; }

/* ---------- κινητό / tablet ---------- */
@media (max-width: 899px) {
  .v1, .v2, .v3-body { grid-template-columns: minmax(0, 1fr); }
  .v1-head { position: static; } .v1-note { max-width: none; }
  .v1-list { margin-top: 20px; }
  .v1-row { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding: 28px 0; }
  .v1-viz { order: -1; max-width: 300px; }
  .v1-row h3 { color: var(--ink); } .v1-row p, .v1-viz { opacity: 1; }
  .v2-dial { order: -1; max-width: 360px; margin: 8px auto 4px; }
  .v2-mark { font-size: 30vw; bottom: auto; top: 0; }
  .v3-stage { display: none; } .v3-mob { display: block; margin-bottom: 18px; }
  .v3-step { min-height: 0; opacity: 1; padding: 30px 0 8px; }
  .v3-step p { font-size: var(--s-body); max-width: none; }
  .v3-note { padding: 24px 0 0; }
  .v4-tile--single, .v4-tile--program, .v4-tile--continuous { grid-column: span 12; min-height: 0; }
  .v4-tile--continuous { display: flex; align-items: stretch; }
  .v5-item--1 { --ind: 6%; } .v5-item--2 { --ind: 12%; }
  .v5-note { margin-left: 12% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .f18 *, .f18 *::before, .f18 *::after { transition: none !important; animation: none !important; }
  .v5-line { transform: none; }
}

/* επιλογέας παραλλαγών στο εργαλείο preview */
.lab__t { display: inline-flex; gap: 2px; }
.lab__t a { opacity: .7; min-width: 26px; text-align: center; }
html[data-fx="1"] [data-fxp="1"], html[data-fx="2"] [data-fxp="2"], html[data-fx="3"] [data-fxp="3"], html[data-fx="4"] [data-fxp="4"], html[data-fx="5"] [data-fxp="5"] { opacity: 1; background: #fff; color: #0E1A3C; border-radius: 999px; }