/* ==========================================================================
   NIKIP.ART
   White ground, soft purple, intense purple. No black anywhere — the darkest
   value on the page is a deep violet, which keeps everything gentle.
   --------------------------------------------------------------------------
   01. Tokens
   02. Reset & base
   03. Typography
   04. Buttons & links
   05. Header / navigation
   06. Hero
   07. About
   08. Gallery
   09. Lightbox
   10. Contact & form
   11. Invitation strip
   12. Footer
   13. Responsive
   14. Motion & print
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  /* Colour — white + soft purple + intense purple, nothing else */
  --paper:        #FFFFFF;
  --mist:         #F7F3FD;   /* softest wash, for alternating sections */
  --lilac:        #E9DDF8;   /* soft purple, for fills and rules */
  --lilac-deep:   #CDB6EC;   /* soft purple, one step stronger */
  --violet:       #7C3AED;   /* intense purple — the accent */
  --violet-ink:   #4C1D95;   /* deep purple, used where black would go */
  --text:         #4A3E63;   /* body copy, purple-grey */
  --text-soft:    #6F6389;   /* secondary copy */

  /* Type */
  /* Fraunces and Nunito have no Greek letters, so Greek text (on any page)
     falls through to Literata and Manrope. fonts.css uses unicode-range, so
     the Greek files only load when a page actually has Greek characters. */
  --display: "Fraunces", "Literata", Georgia, "Times New Roman", serif;
  --body:    "Nunito", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:  clamp(2.2rem, 5.4vw, 4.6rem);
  --fs-h2:    clamp(1.9rem, 3.4vw, 3rem);
  --fs-h3:    clamp(1.15rem, 1.7vw, 1.45rem);
  --fs-lede:  clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small: 0.9rem;

  /* Space */
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --maxw:      78rem;

  /* Shape & depth — soft, purple-tinted, never grey */
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow:      0 18px 45px -22px rgba(124, 58, 237, 0.34);
  --shadow-soft: 0 10px 30px -18px rgba(124, 58, 237, 0.28);

  /* Around the paintings themselves: warm and neutral, so nothing tints the
     art. Violet stays for the interface. */
  --mat:        #F3EEE7;   /* warm gesso */
  --r-art:      3px;       /* paintings have corners */
  --shadow-art: 0 1px 2px rgba(46, 36, 64, 0.22), 0 14px 26px -14px rgba(46, 36, 64, 0.40);

  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
}

/* Literata's Greek reads lighter than Fraunces at the same weight */
html[lang="el"] .h-hero { font-weight: 600; font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
html[lang="el"] .h-section { font-weight: 650; }


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* `clip` not `hidden`: hidden would make this a scroll container and break
     any position:sticky descendant. */
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }

/* Component classes below set display, which would otherwise beat the UA
   stylesheet's [hidden] rule. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2.5px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--lilac); color: var(--violet-ink); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--mist { background: var(--mist); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 999;
  padding: 0.7rem 1.2rem;
  background: var(--violet);
  color: var(--paper);
  border-radius: var(--r-sm);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }


/* ==========================================================================
   03. TYPOGRAPHY
   Fraunces is a variable face; SOFT rounds the terminals and WONK swaps in
   the slanted/wobbly forms. That is what makes the headings feel hand-made
   rather than editorial.
   ========================================================================== */
h1, h2, h3, .display {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--violet-ink);
  text-wrap: balance;
  /* Sentence case throughout — no all-caps anywhere on this site */
}
.hero__caption { text-wrap: balance; }
.lede, .prose p { text-wrap: pretty; }

.h-hero { font-size: var(--fs-hero); font-weight: 500; line-height: 1.02; }
.h-section { font-size: var(--fs-h2); margin-bottom: 1rem; }
.h-sub { font-size: var(--fs-h3); font-weight: 600; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--text);
  max-width: 54ch;
}

.prose > * + * { margin-top: 1.1rem; }
.prose > h2 + p { margin-top: 0.6rem; }
.prose > * + h2 { margin-top: 2.25rem; }
.prose p { max-width: 62ch; }
.prose a,
.form__hint a {
  color: var(--violet-ink);
  text-decoration: underline;
  text-decoration-color: var(--lilac-deep);
  text-underline-offset: 3px;
}
.prose a:hover,
.form__hint a:hover { text-decoration-color: currentColor; }

.note { font-size: var(--fs-small); color: var(--text-soft); }


/* ==========================================================================
   04. BUTTONS & LINKS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.8rem;
  border: 2px solid transparent;
  border-radius: 999px;          /* pill — soft by construction */
  background: var(--violet);
  color: var(--paper);
  font-weight: 700;
  font-size: var(--fs-small);
  cursor: pointer;
  /* Micro-interaction layers: ::before is the paint stroke that sweeps in on
     hover, ::after is the splat left where the button is pressed (script.js
     sets --x/--y). Both sit behind the label thanks to `isolation`. */
  --fill: var(--violet-ink);
  --splat: rgba(255, 255, 255, 0.45);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.3s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  bottom: -20%;
  left: -15%;
  width: 130%;
  background: var(--fill);
  /* ragged right edge, like the end of a brush stroke */
  border-radius: 0 46% 54% 0 / 0 58% 42% 0;
  transform: translateX(-102%) skewX(-14deg);
  transition: transform 0.55s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 46% 54% 41% 59% / 57% 43% 57% 43%;
  background: var(--splat);
  opacity: 0;
  pointer-events: none;
}
.btn.is-splat::after { animation: btn-splat 0.6s var(--ease); }

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateX(0) skewX(-14deg); }
.btn:active { transform: translateY(0) scale(0.96); transition-duration: 0.12s; }
.btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

@keyframes btn-splat {
  0%   { opacity: 1; transform: scale(0.4) rotate(0deg); }
  100% { opacity: 0; transform: scale(14) rotate(40deg); }
}

.btn--quiet {
  --fill: var(--lilac);
  --splat: rgba(124, 58, 237, 0.22);
  background: transparent;
  color: var(--violet-ink);
  border-color: var(--lilac-deep);
}
.btn--quiet:hover,
.btn--quiet:focus-visible {
  color: var(--violet-ink);
  border-color: var(--lilac);
}

.btn--onlilac { background: var(--violet); color: var(--paper); }
.btn--sm { padding: 0.6rem 1.25rem; }
.btn--block { width: 100%; }

/* Text link: underline grows from the left on hover. No arrow glyph. */
.tlink {
  color: var(--violet);
  font-weight: 700;
  position: relative;
  padding-bottom: 2px;
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); }


/* ==========================================================================
   05. HEADER / NAVIGATION
   Plain white, no backdrop-filter. (A non-none backdrop-filter would make the
   header a containing block for position:fixed, trapping the mobile menu
   inside the header strip.)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  transition: box-shadow 0.35s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -18px rgba(124, 58, 237, 0.5); }

.site-header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.55rem; flex-shrink: 0; }
/* LogoNikipArt_Mark.png is the logo cropped to the paint blob itself (the
   original file was half transparent padding), so this height is the blob. */
.brand__mark {
  width: auto;
  height: clamp(2.5rem, 4vw, 3.25rem);
  mix-blend-mode: multiply;   /* lets the lilac sit into the page like paint */
  transform-origin: 40% 60%;
  transition: transform 0.5s var(--ease);
}
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark { transform: rotate(-5deg) scale(1.05); }
.brand__text {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 600;
  color: var(--violet-ink);
}

/* ---------- Paint-daub social icons (beside the logo) ---------- */
.site-header__start { display: flex; align-items: center; gap: clamp(0.75rem, 1.8vw, 1.4rem); }

.daubs { display: flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }

.daub {
  --blob:  64% 36% 58% 42% / 44% 62% 38% 56%;
  --blob2: 40% 60% 37% 63% / 60% 40% 62% 38%;
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;   /* 44px tap target */
  height: 2.75rem;
  color: var(--violet-ink);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.daub--alt {
  --blob:  38% 62% 45% 55% / 62% 38% 60% 40%;
  --blob2: 62% 38% 64% 36% / 40% 63% 37% 60%;
}

/* The daub itself: a soft lilac blob with a faint brushed sheen */
.daub::before,
.daub::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--blob);
}
.daub::before {
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.75) 0 14%, transparent 34%),
    var(--lilac);
  transform: translate(2px, 1px) rotate(-8deg) scale(1.06, 0.94);
  transition: transform 0.5s var(--ease);
}
/* The fresh paint: violet that dabs in from one corner */
.daub::after {
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.28) 0 12%, transparent 32%),
    var(--violet);
  transform: scale(0.15) rotate(25deg);
  transform-origin: 30% 75%;
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease);
}

.daub__icon {
  width: 1.15rem;
  height: 1.15rem;
  transition: transform 0.45s var(--ease), color 0.3s var(--ease);
}

/* Three drops flicked off the brush */
.daub__drop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50% 50% 50% 0;
  background: var(--violet);
  opacity: 0;
  pointer-events: none;
}
.daub__drop:nth-of-type(1) { --dx: -19px; --dy: -15px; }
.daub__drop:nth-of-type(2) { --dx:  21px; --dy: -11px; width: 4px; height: 4px; }
.daub__drop:nth-of-type(3) { --dx:   9px; --dy:  21px; width: 3px; height: 3px; }

.daub:hover,
.daub:focus-visible { color: var(--paper); }
.daub:hover::before,
.daub:focus-visible::before { transform: rotate(10deg) scale(1.12); }
.daub:hover::after,
.daub:focus-visible::after {
  opacity: 1;
  transform: none;
  animation: daub-wobble 1.6s var(--ease) 0.35s infinite alternate;
}
.daub:hover .daub__icon,
.daub:focus-visible .daub__icon { transform: rotate(-10deg) scale(1.08); }
.daub:hover .daub__drop,
.daub:focus-visible .daub__drop { animation: daub-flick 0.6s var(--ease) forwards; }
.daub:hover .daub__drop:nth-of-type(2),
.daub:focus-visible .daub__drop:nth-of-type(2) { animation-delay: 0.06s; }
.daub:hover .daub__drop:nth-of-type(3),
.daub:focus-visible .daub__drop:nth-of-type(3) { animation-delay: 0.12s; }
.daub:active::after { transform: scale(0.9); }
.daub:focus-visible { outline: none; }
.daub:focus-visible::before { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--violet); }

@keyframes daub-wobble {
  to { border-radius: var(--blob2); }
}
@keyframes daub-flick {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

/* ---------- Language switch (EN / ΕΛ) ---------- */
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1.5px solid var(--lilac-deep);
  border-radius: 999px;
}
.lang-switch__opt {
  min-width: 2.2rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-soft);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.lang-switch__opt:hover { color: var(--violet); transform: translateY(-1px); }
.lang-switch__opt.is-current { background: var(--lilac); color: var(--violet-ink); }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); }
.nav__link {
  position: relative;
  font-weight: 600;
  color: var(--text);
  padding-block: 0.3rem;
  transition: color 0.3s var(--ease);
}
.nav__link:hover { color: var(--violet); }
.nav__link.is-current { color: var(--violet-ink); }
/* A small soft dot marks the current page — quieter than an underline */
.nav__link.is-current::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--violet);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 24px; height: 2.5px;
  border-radius: 2px;
  background: var(--violet-ink);
  transition: transform 0.35s var(--ease), opacity 0.2s linear;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }


/* ==========================================================================
   06. HERO
   The source video is portrait 1080x1920, so it sits in a tall rounded card
   beside the headline rather than being cropped into a full-bleed banner.
   ========================================================================== */
.hero { padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3.5rem, 8vw, 7rem); }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__title { margin-bottom: 1.5rem; }
.hero__lede { margin-bottom: 2.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Video card + the soft lilac shape behind it */
.hero__media { position: relative; justify-self: center; width: 100%; max-width: 27rem; }
.hero__media::before {
  content: "";
  position: absolute;
  inset: -5% -6% -3% -7%;
  background: var(--lilac);
  /* organic blob rather than a rectangle */
  border-radius: 58% 42% 46% 54% / 44% 52% 48% 56%;
  z-index: 0;
}
.hero__frame {
  position: relative;
  z-index: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--lilac);
  aspect-ratio: 9 / 16;
}
.hero__frame video,
.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__pause {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(28, 24, 34, 0.45);
  color: var(--paper);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.3s var(--ease);
}
.hero__pause:hover { background: var(--violet); }
.hero__pause svg { width: 20px; height: 20px; }
.hero__play-icon,
.hero__pause.is-paused .hero__pause-icon { display: none; }
.hero__pause.is-paused .hero__play-icon { display: block; }

.hero__caption {
  margin-top: 1rem;
  text-align: center;
  color: var(--text-soft);
  font-size: var(--fs-small);
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   07. ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.about__figure { position: relative; }
.about__figure img {
  width: 100%;
  border-radius: var(--r-art);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}
.fact {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--mist);
  color: var(--violet-ink);
  font-size: var(--fs-small);
  font-weight: 600;
}
/* On the mist section the chips would vanish into the background */
.section--mist .fact { background: var(--paper); }


/* ==========================================================================
   08. GALLERY
   Nine distinct paintings. Images keep their true proportions — nothing is
   cropped — and the rhythm comes from column spans and generous white space.
   ========================================================================== */
.gallery__intro { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.25rem, 3vw, 3.5rem);
  row-gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.piece { grid-column: span 12; }

/* Each painting sits on a warm mat, like a plate in a catalogue. The shadow
   is on the painting, not the mat, so it reads as a canvas lying on paper. */
.piece__frame {
  margin: 0;
  padding: clamp(0.9rem, 3.2vw, 2rem);
  border-radius: var(--r-art);
  background: var(--mat);
  transition: transform 0.5s var(--ease);
}
/* --shadow-art goes back on once the photos are cropped to the canvas edge;
   on photos that still show the room it reads as a shadow on the wall. */
.piece__frame img {
  width: 100%;
  border-radius: 2px;
  background: var(--mat);
}

.piece:hover .piece__frame,
.piece:focus-visible .piece__frame { transform: translateY(-4px); }

.piece__meta { margin-top: 1rem; }
.piece__title { font-size: var(--fs-h3); }
.piece__medium { color: var(--text-soft); font-size: var(--fs-small); }
.piece__place { color: var(--violet); font-size: var(--fs-small); font-weight: 600; }


/* ==========================================================================
   09. LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  /* A deep neutral haze: a coloured backdrop would shift the painting's colours */
  background: rgba(28, 24, 34, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(100%, 68rem);
}
/* The stage clips the zoomed image to the painting's own frame */
.lightbox__stage {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--r-art);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.5);
  cursor: zoom-in;
  touch-action: none;          /* pinch and drag are handled in script.js */
  user-select: none;
  -webkit-user-select: none;
}
.lightbox__stage.is-zoomed { cursor: grab; }
.lightbox__stage.is-dragging { cursor: grabbing; }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  max-height: 74dvh;   /* ignores mobile browser toolbars where supported */
  width: auto;
  transform-origin: 50% 50%;
  transition: transform 0.4s var(--ease);
  will-change: transform;
  -webkit-user-drag: none;
}
.lightbox__hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--lilac);
  font-size: 0.8rem;
}
/* "Tap" on touch screens, "Click" where there is a mouse */
.lightbox__hint--mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .lightbox__hint--touch { display: none; }
  .lightbox__hint--mouse { display: block; }
}
.lightbox__count {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--lilac);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__caption { text-align: center; color: var(--paper); }
.lightbox__title {
  display: block;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: var(--fs-h3);
  font-weight: 600;
}
.lightbox__medium { color: var(--lilac); font-size: var(--fs-small); }

.lightbox__close,
.lightbox__zoom,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox__close:hover,
.lightbox__zoom:hover,
.lightbox__nav:hover { background: var(--violet); transform: scale(1.08); }

.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__zoom  { top: clamp(1rem, 3vw, 2rem); right: calc(clamp(1rem, 3vw, 2rem) + 58px); }
.lightbox__zoom svg { width: 22px; height: 22px; }
.lightbox__zoom-plus { transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); transform-origin: 10.5px 10.5px; }
.lightbox__zoom[aria-pressed="true"] { background: var(--violet); }
.lightbox__zoom[aria-pressed="true"] .lightbox__zoom-plus { transform: scaleY(0); opacity: 0; }
.lightbox__nav { top: 50%; margin-top: -24px; }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }

/* Locked on <html>, not <body>: overflow:hidden on body would make it a
   scroll container and unstick the sticky header. */
html.is-locked { overflow: hidden; }


/* ==========================================================================
   10. CONTACT & FORM
   ========================================================================== */
/* Phones: the steps come before the form, so offer a shortcut to it */
.contact__jump {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--violet-ink);
  text-decoration: underline;
  text-decoration-color: var(--lilac-deep);
  text-underline-offset: 3px;
}
@media (min-width: 900px) { .contact__jump { display: none; } }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* This IS a sequence, so numbering it is meaningful */
.steps { counter-reset: step; display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}
.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--violet-ink);
  font-weight: 700;
  font-size: var(--fs-small);
}
.step__title { font-weight: 700; color: var(--violet-ink); }
.step p { font-size: var(--fs-small); }

.elsewhere { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1.5px solid var(--lilac); }
.elsewhere__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.85rem; }
.elsewhere__links a {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--mist);
  color: var(--violet-ink);
  font-weight: 600;
  font-size: var(--fs-small);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.elsewhere__links a:hover { background: var(--violet); color: var(--paper); }

.form {
  background: var(--paper);
  border: 1.5px solid var(--lilac);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.form__row { margin-bottom: 1.4rem; }
.form__label {
  display: block;
  font-weight: 700;
  color: var(--violet-ink);
  margin-bottom: 0.45rem;
}
.form__optional { font-weight: 400; color: var(--text-soft); white-space: nowrap; }
.form__input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  background: var(--mist);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.form__input::placeholder { color: var(--text-soft); opacity: 1; }
.form__input:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--violet);
}
.form__textarea { resize: vertical; min-height: 9.5rem; }
.form__input.is-invalid { border-color: #C2410C; background: #FFF7ED; }

.form__hint { font-size: var(--fs-small); color: var(--text-soft); margin-top: 0.35rem; }
.form__error { font-size: var(--fs-small); color: #C2410C; margin-top: 0.35rem; font-weight: 600; }
.form__error:empty { display: none; }

/* Off-screen honeypot for bots */
.form__gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin-top: 1.1rem; font-weight: 700; min-height: 1.4em; }
.form__status.is-success { color: var(--violet); }
.form__status.is-error { color: #C2410C; }
.btn.is-busy { opacity: 0.65; pointer-events: none; }


/* ==========================================================================
   11. INVITATION STRIP
   ========================================================================== */
.invite { background: var(--mist); }
.invite__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.invite__text { max-width: 60ch; }
.invite__inner .btn { justify-self: start; }


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer { border-top: 1.5px solid var(--lilac); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}
.footer-nav, .socials { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.2vw, 1.75rem); }
.footer-nav a, .socials a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* comfortable tap target */
  font-weight: 600;
  color: var(--text);
  transition: color 0.3s var(--ease);
}
.footer-nav a:hover, .socials a:hover { color: var(--violet); }

.site-footer__bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1.5px solid var(--lilac);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: var(--fs-small);
  color: var(--text-soft);
}


/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (min-width: 720px) {
  /* Gallery spans follow the paintings: portrait (3:4) pieces share one
     size at 4 columns, landscape pieces get 8, and the closing landscape
     sits centred. */
  .piece.is-4 { grid-column: span 4; }
  .piece.is-8 { grid-column: span 8; }
  .piece.is-last { grid-column: 3 / 11; }

  /* Home-page trio: column widths follow each image's aspect ratio
     (3:4, 4:3, 3:4) so all three frames share one height with no dead space. */
  .gallery__grid--trio {
    grid-template-columns: 0.75fr 1.334fr 0.75fr;
    column-gap: clamp(1rem, 2vw, 1.75rem);
  }
  .gallery__grid--trio .piece { grid-column: auto; }
}

/* Trio column widths are matched to the image ratios; mat padding would
   break their shared height, so here the paintings sit on the page itself. */
.gallery__grid--trio .piece__frame { padding: 0; background: none; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(3rem, 6vw, 5rem); }
  .hero__media { justify-self: end; }

  .about__grid { grid-template-columns: 0.85fr 1.15fr; }
  .about__figure { order: -1; }

  .contact__grid { grid-template-columns: 0.9fr 1.1fr; }
  .invite__inner { grid-template-columns: 1fr auto; gap: 3rem; }
}

/* ---------- Mobile hero: text first, then the video at full width ----------
   The headline and buttons fill the first screen; the 4:5 crop of the 9:16
   clip follows below, large enough to read as a painting. */
@media (max-width: 899px) {
  .hero { padding-top: 1.5rem; }
  .hero__grid { gap: 2.5rem; }
  .hero__media { max-width: 100%; }
  .hero__media::before { inset: -3% -4% -2% -4%; }
  .hero__frame { aspect-ratio: 4 / 5; }
  .hero__caption { margin-top: 0.75rem; text-align: left; }
  .hero__title { margin-bottom: 1rem; }
  .hero__lede { margin-bottom: 1.5rem; }
}

/* ---------- Mobile navigation ----------
   1024px, not 900: below that the full row (and the longer Greek labels)
   no longer fits. Keep in sync with the resize check in script.js. */
@media (max-width: 1023px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; gap: 1.5rem; text-align: center; }
  .nav__link {
    font-family: var(--display);
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    font-weight: 600;
    color: var(--violet-ink);
  }
  .nav__link.is-current::after { bottom: -6px; width: 7px; height: 7px; margin-left: -3.5px; }
  .lang-switch__opt { font-size: 1rem; padding: 0.5rem 0.95rem; }

  /* Logo and close button stay above the overlay fill */
  .site-header__inner { position: relative; z-index: 101; }
  .brand, .site-header__start, .nav-toggle { position: relative; z-index: 2; }
  .nav { z-index: 1; }
}

@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  /* Keep the controls off the painting: close/zoom above it, arrows below */
  .lightbox { padding: 4.5rem 1rem 5rem; }
  .lightbox__img { max-height: calc(100vh - 17rem); max-height: calc(100dvh - 17rem); }
  .lightbox__nav { width: 42px; height: 42px; top: auto; bottom: 1rem; margin-top: 0; }
}

/* Very narrow phones: the social icons give way so the name and menu button fit */
@media (max-width: 380px) {
  .site-header__start .daubs { display: none; }
}


/* ==========================================================================
   14. MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .lightbox, .hero__frame video, .hero__pause { display: none !important; }
  body { background: #fff; }
}