/* Νέων Έργα — the 3D card deck (deck.js) embedded in another page, on a white stage.
   Card designs are the same as deck.css, scoped under .dk so they do not clash with the host page's styles. */
.dk{--card:340px;--spacing:118px;--persp:1900px;--radius:12px;--paper:#FAFAFA;--ink:#141414;
  position:relative;height:460vh;background:#fff;color:#141414}   /* ~15 cards */
.dk-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#fff}
.dk .glow{position:absolute;inset:-20%;background:radial-gradient(40% 40% at 62% 55%,var(--glow,#7EBFE9) 0%,transparent 70%);opacity:.2;transition:background 1.2s;pointer-events:none;z-index:1}
.dk-head{position:relative;z-index:4;padding:clamp(88px,13vh,130px) max(24px,calc((100vw - 1240px)/2)) 0;pointer-events:none;max-width:560px;box-sizing:content-box}
.dk-head .dk-k{margin:0 0 10px;font:600 .78rem var(--display,system-ui);letter-spacing:.14em;text-transform:uppercase;color:#5E6570}
.dk-head h2{margin:0;font-family:var(--display,system-ui);font-weight:800;font-size:clamp(2.2rem,4.6vw,3.8rem);letter-spacing:-.045em;line-height:1}
.dk-head h2 span{color:#D5215E}
.dk-follow{margin:14px 0 0;font-weight:700;pointer-events:auto}
.dk-follow a{color:#D5215E;text-decoration:none}
.dk-follow a:hover{text-decoration:underline}
.dk-head p.dk-sub{margin:14px 0 0;color:#5E6570;font-size:1rem;max-width:36ch}

.dk .deck{position:absolute;inset:0;z-index:2;overflow:clip;perspective:var(--persp);perspective-origin:50% 50%}
.dk .deck-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:translate(17%,9%) rotateX(-25deg) rotateY(-45deg);pointer-events:none}
.dk .card{position:absolute;left:50%;top:50%;width:var(--card);height:var(--card);margin:calc(var(--card) / -2) 0 0 calc(var(--card) / -2);
  transform:translateZ(var(--z,0px)) scale(var(--s,1));opacity:.96;will-change:transform;pointer-events:auto;cursor:pointer;display:block;text-decoration:none}
.dk .card.is-hidden{visibility:hidden}
.dk .card-lift{display:block;width:100%;height:100%;border-radius:var(--radius);overflow:hidden;background:#fff;position:relative;color:var(--paper);
  box-shadow:0 10px 30px rgba(20,20,40,.14);transition:transform .3s ease,box-shadow .3s ease;font-family:var(--display,system-ui)}
.dk .card:hover .card-lift,.dk .card.is-front .card-lift{transform:translateY(-40px);box-shadow:0 28px 54px rgba(20,20,40,.26)}
.dk .card:focus-visible{outline:0}
.dk .card:focus-visible .card-lift{outline:2px solid #7B3F98;outline-offset:3px}

/* ---------- card designs (shared by the deck and the phone feed) ---------- */
.dk .c{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;font-weight:700}
.dk .c .k{position:absolute;left:22px;top:20px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-weight:600}
.dk .c .big{font-size:var(--fs,88px);line-height:.9;letter-spacing:-.045em;font-weight:900;margin:0;white-space:nowrap}
.dk .c .big.xl{font-size:124px;line-height:.82;white-space:nowrap}
.dk .c .mid{font-size:34px;line-height:1;letter-spacing:-.03em;font-weight:900;margin:0}
.dk .c .sub{font-size:.95rem;font-weight:500;margin:10px 0 0;opacity:.9;max-width:26ch}
.dk .c .nums{display:grid;gap:8px}
.dk .c .nums b{display:block;font-size:52px;line-height:.9;letter-spacing:-.05em;font-weight:900}
.dk .c .nums span{font-size:.8rem;font-weight:500;opacity:.9}
.dk .c img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dk .c .bar{position:relative;background:var(--paper);color:var(--ink);padding:12px 14px;border-radius:8px;margin:0 -2px -2px}
.dk .c .bar b{display:block;font-size:1rem}
.dk .c .bar span{display:block;font-size:.78rem;font-weight:500;opacity:.75;margin-top:2px}
.dk .c .fig{position:absolute;width:38%;height:62%;right:8%;top:6%;opacity:.95}
.dk .c .fig2{position:absolute;width:26%;height:42%;right:38%;top:28%;opacity:.95}
.dk .c .ink{color:var(--ink)}
/* patterns */
.dk .p-stripes{background:repeating-linear-gradient(135deg,var(--a) 0 22px,var(--b) 22px 44px)}
.dk .p-dots{background-color:var(--a);background-image:radial-gradient(var(--b) 34%,transparent 36%);background-size:46px 46px}
.dk .p-rays{background:repeating-conic-gradient(from 0deg at 50% 50%,var(--a) 0 9deg,var(--b) 9deg 18deg)}
.dk .p-rings{background:repeating-radial-gradient(circle at 70% 30%,var(--a) 0 18px,var(--b) 18px 36px)}
.dk .p-check{background:conic-gradient(var(--a) 25%,var(--b) 0 50%,var(--a) 0 75%,var(--b) 0);background-size:80px 80px}
.dk .p-split{background:linear-gradient(90deg,var(--a) 50%,var(--b) 50%)}
.dk .p-grad{background:linear-gradient(160deg,var(--a),var(--b))}
.dk .p-solid{background:var(--a)}
.dk .p-waves{background-color:var(--a);background-image:radial-gradient(circle at 50% 0,transparent 58%,var(--b) 60% 68%,transparent 70%),radial-gradient(circle at 50% 100%,transparent 58%,var(--b) 60% 68%,transparent 70%);background-size:120px 60px}
.dk .c.has-pattern .big, .dk .c.has-pattern .mid{text-shadow:0 2px 0 rgba(0,0,0,.08)}

/* Instagram posts (see deck.css) */
.dk .c .ig-wrap{position:absolute;inset:0;overflow:hidden}
.dk .c .ig{position:absolute;left:50%;top:0;width:100%;height:230%;border:0;background:#fff;pointer-events:none;
  transform:translate(-50%,calc(-54px * var(--igs,1))) scale(var(--igs,1));transform-origin:50% 0}
.dk .c .ig-badge{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:99px;background:rgba(20,20,20,.72);color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.04em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dk .c p{color:inherit}
.dk .c .fig,.dk .c .fig2{position:absolute}

.dk .caption{position:absolute;right:max(24px,calc((100vw - 1240px)/2));bottom:110px;z-index:5;max-width:380px;text-align:right;pointer-events:none;
  padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.dk .caption.is-on{opacity:1;transform:none}
.dk .caption-k{margin:0 0 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#5E6570}
.dk .caption h3{margin:0 0 6px;font-family:var(--display,system-ui);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:#141414}
.dk .caption p{margin:0;color:#5E6570;font-size:.95rem}

.dk-pill{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:6;display:flex;gap:4px;padding:4px;border-radius:99px;
  background:rgba(20,20,20,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.875rem;width:max-content;max-width:calc(100vw - 24px)}
.dk-pill a{padding:8px 14px;border-radius:99px;min-height:34px;display:grid;place-items:center;color:#141414;text-decoration:none;transition:background .25s,color .25s;white-space:nowrap}
.dk-pill a:hover{background:color-mix(in srgb,var(--acc) 30%,transparent)}
.dk-pill a.is-active{background:#141414;color:#fff}

.dk .feed{display:none}
.dk-phone{display:none}
@media (min-width:810px) and (max-width:1199.98px){ .dk{--card:300px;--spacing:104px} }
/* phones: a row of cards you swipe sideways, instead of the 3D deck */
@media (max-width:809.98px){
  .dk{height:auto}
  .dk-stage{position:static;height:auto;overflow:visible;padding-bottom:48px}
  .dk-head{padding:64px 16px 0;max-width:none;box-sizing:border-box}
  .dk .deck,.dk .caption,.dk .glow,.dk-pill{display:none}
  .dk .feed{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:24px 16px 10px;scroll-padding-left:16px}
  .dk .feed .card{position:relative;left:auto;top:auto;margin:0;flex:0 0 min(78vw,330px);width:min(78vw,330px);height:min(78vw,330px);transform:none;opacity:1;scroll-snap-align:start;cursor:default}
  .dk .feed .card:hover .card-lift{transform:none}
  .dk .feed .c .big{font-size:min(var(--fs,88px),11vw)}
  .dk .feed .c .big.xl{font-size:min(124px,26vw)}
  .dk-desk{display:none}
  .dk-phone{display:inline}
}
@media (prefers-reduced-motion:reduce){ .dk .card-lift,.dk .caption,.dk-pill a{transition:none} }
