/* Φαίνεσαι. · «Ο φακός»: the studio gallery (fainesai-gallery.js). Every rule is scoped under .fg.
   Without WebGL or with reduced motion, the section shows its own static markup (.fg-fallback).
   With WebGL the script adds .fg-on: the section becomes a pinned studio under the sticky header. */
.fg{--fg-ink:var(--ink,#231F20);--fg-mint:var(--mint,#00F2A6);--fg-room:var(--stone,#F4F4F2);
  --fg-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 .62 0 12.92)' d='M3 21c30-3 70-5 118-4 30 1 52 0 76-3l-1 9c-2 3-1 6 1 9-40 3-82 4-124 3-24 0-46 1-69 3 2-3 1-6-1-8 1-3 1-6 0-9z' fill='%2300F2A6'/%3E%3C/svg%3E")}

/* static version */
.fg>.fg-fallback{padding:var(--sec,108px) var(--gut,6vw)}
.fg .fg-h{margin:0 0 .9em;max-width:9.5em;font:700 clamp(40px,5vw,84px)/1 Mod,system-ui,sans-serif;letter-spacing:-.03em;color:var(--fg-ink)}
.fg .fg-h em{font-style:normal;background:var(--fg-mk) 0 0/100% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fg .fg-grid{columns:4 230px;column-gap:14px}
.fg .fg-grid a{display:block;margin:0 0 14px;break-inside:avoid}
.fg .fg-grid img{display:block;width:100%;height:auto}

/* the studio */
.fg.fg-on{position:relative;height:calc(100vh - var(--head-h,79px));height:calc(100svh - var(--head-h,79px));overflow:hidden;background:var(--fg-room);color:var(--fg-ink);
  --fg-fx:30px;--fg-ft:22px;--fg-fb:46px;-webkit-tap-highlight-color:transparent}
.fg.fg-on>.fg-fallback{display:none}
.fg .fg-gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;outline:none}
.fg .fg-title{position:absolute;left:6vw;top:12%;margin:0;max-width:9.5em;font:700 clamp(44px,6vw,100px)/.98 Mod,system-ui,sans-serif;letter-spacing:-.03em;color:var(--fg-ink);pointer-events:none;will-change:opacity,transform}
.fg .fg-mk{background:var(--fg-mk) 0 0/0% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* viewfinder: frame lines, the focus point, tiny readouts */
.fg .fg-vf{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity}
.fg .fg-c{position:absolute;width:18px;height:18px;border:0 solid rgba(35,31,32,.55)}
.fg .fg-tl{left:var(--fg-fx);top:var(--fg-ft);border-width:1px 0 0 1px}
.fg .fg-tr{right:var(--fg-fx);top:var(--fg-ft);border-width:1px 1px 0 0}
.fg .fg-bl{left:var(--fg-fx);bottom:var(--fg-fb);border-width:0 0 1px 1px}
.fg .fg-br{right:var(--fg-fx);bottom:var(--fg-fb);border-width:0 1px 1px 0}
.fg .fg-af{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;color:var(--fg-ink);opacity:0;will-change:transform,opacity}
.fg .fg-af svg{display:block;width:100%;height:100%;overflow:visible;fill:none}
.fg .fg-u{stroke:rgba(255,255,255,.7);stroke-width:3}
.fg .fg-o{stroke:currentColor;stroke-width:1.25}
.fg .fg-af.fg-lock{color:var(--fg-mint)}
.fg .fg-af.fg-lock .fg-u{stroke:rgba(35,31,32,.38)}
.fg .fg-ro{position:absolute;left:var(--fg-fx);right:var(--fg-fx);bottom:0;height:var(--fg-fb);display:flex;align-items:center;justify-content:space-between;gap:16px;
  font:400 11px/1 Mod,system-ui,sans-serif;letter-spacing:.08em;color:rgba(35,31,32,.62);font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;will-change:opacity}
.fg .fg-ex{display:flex;gap:14px;white-space:nowrap;transition:opacity .3s}
.fg .fg-n{color:var(--fg-ink);font-weight:700;letter-spacing:.06em;white-space:nowrap}
.fg .fg-hint{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;transition:opacity .6s}
/* full-screen view controls */
.fg .fg-ui{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden}
.fg .fg-ui button{position:absolute;pointer-events:auto;width:46px;height:46px;border-radius:50%;border:0;padding:0;margin:0;cursor:pointer;
  background:rgba(250,250,248,.86);color:var(--fg-ink);box-shadow:0 6px 24px -12px rgba(35,31,32,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center}
.fg .fg-ui button:hover{background:#fff}
.fg .fg-ui button:focus-visible{outline:2px solid var(--fg-mint);outline-offset:2px}
.fg .fg-ui svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none}
.fg .fg-ui .fg-close{top:16px;right:var(--fg-fx)}
.fg .fg-ui .fg-prev{left:var(--fg-fx);top:50%;margin-top:-23px}
.fg .fg-ui .fg-next{right:var(--fg-fx);top:50%;margin-top:-23px}
.fg .fg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;list-style:none}

@media (max-width:759px){
  .fg .fg-grid{columns:2;column-gap:10px}
  .fg .fg-grid a{margin-bottom:10px}
  .fg.fg-on{--fg-fx:14px;--fg-ft:16px;--fg-fb:44px}
  .fg .fg-title{left:20px;right:20px;top:auto;bottom:13%;font-size:clamp(40px,11.5vw,56px)}
  .fg .fg-ex{gap:10px}
  .fg .fg-hint{display:none}
  .fg.fg-lb .fg-ex{opacity:0}
  .fg .fg-ui .fg-close{top:auto;bottom:16px;right:50%;margin-right:-23px}
  .fg .fg-ui .fg-prev{top:auto;bottom:16px;margin:0;left:calc(50% - 86px)}
  .fg .fg-ui .fg-next{top:auto;bottom:16px;margin:0;right:calc(50% - 86px)}
}
/* «Παράλειψη»: jumps past the pinned gallery (11 Oct 2026). Top right of the stage, clear of the page's dot scroller */
.fg .fg-skip{position:absolute;top:18px;right:calc(var(--fg-fx) + 34px);z-index:3;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:999px;
  background:rgba(255,255,255,.92);color:#231f20;font:500 13px/1 var(--body,system-ui,sans-serif);letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 18px -10px rgba(35,31,32,.5)}
.fg .fg-skip:hover{background:#fff}
.fg .fg-skip:focus-visible{outline:2px solid var(--fg-mint);outline-offset:2px}
.fg .fg-skip svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none}