:root{
  --bg:#fbfdfc;
  --bg-2:#eef8f6;
  --ink:#163330;
  --ink-soft:#5f7f7a;
  --accent:#4fb8a8; --accent-muted:#65a09e;
  --accent-2:#7c8894;
  --line:#d6ece8;
  --card:#ffffff;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  position:relative;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'EB Garamond', Georgia, serif;
  font-size:19px;
  line-height:1.65;
}
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 8%, rgba(79,184,168,.08), transparent 35%),
    radial-gradient(circle at 92% 92%, rgba(124,136,148,.10), transparent 35%);
}
body::after{
  content:'';
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.85  0 0 0 0 0.65  0 0 0 0 0.22  0 0 0 20 -12'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-repeat:repeat;
  opacity:.55;
  animation:dust-twinkle 6s ease-in-out infinite alternate;
}
@keyframes dust-twinkle{
  0%{opacity:.35;}
  100%{opacity:.6;}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg::after, body::after{animation:none !important;}
}
h1,h2,h3,.brand{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:600;
  letter-spacing:.01em;
  margin:0;
}
a{color:var(--accent);}
.wrap{max-width:920px;margin:0 auto;padding:0 28px;}

/* Nav */
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(251,253,252,.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;max-width:920px;margin:0 auto;padding:11px 28px;gap:10px 16px;}
.brand{font-size:20px;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:13px;}
/* the mark is gold on white, so multiply sits it straight on the page */
.brand-mark{width:46px;height:46px;flex:none;mix-blend-mode:multiply;}
.brand em{color:var(--accent);font-style:italic;}
/* two links that look like one: the name goes home, the mark goes down to
   the note that explains it */
.brand a{color:inherit; font-size:inherit; text-decoration:none;}
/* only the mark is a flex box: making the name one too would swallow the
   space between "Elena" and "Daunytė" */
.brand-mark-link{display:inline-flex; align-items:center; border-radius:4px;}
.brand-mark-link:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.nav-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
nav ul{list-style:none;margin:0;padding:0;}
nav a{color:var(--ink-soft);text-decoration:none;font-size:17px;letter-spacing:.02em;white-space:nowrap;}

/* One row: the name on the left, language and menu in the right corner. */
.nav-tools{display:flex; align-items:center; gap:22px;}
.menu-switch{position:relative;}
/* the menu is the one control every visitor needs, so it is filled rather
   than outlined — an outline on this pale header simply vanished */
/* No box on a desktop: three rounds of lightening showed that what weighed on
   the header was the filled rectangle, not its colour. The word carries itself
   in the dark green of the text, underlined like "Apie ženklą" at the foot, so
   the top and the bottom of the page speak the same way. */
.menu-switch summary{
  list-style:none; cursor:pointer; color:var(--ink);
  font-family:'EB Garamond',serif; font-size:16px; letter-spacing:.03em;
  padding:2px 2px 5px; border:0; border-bottom:1.5px solid var(--accent);
  border-radius:0; background:none;
  transition:.2s ease; white-space:nowrap;
}
.menu-switch summary::-webkit-details-marker{display:none;}
.menu-switch summary::after{
  content:''; display:inline-block; vertical-align:2px; margin-left:11px;
  width:15px; height:9px;
  border-top:1px solid currentColor; border-bottom:1px solid currentColor;
}
.menu-switch summary:hover,.menu-switch summary:focus-visible,
.menu-switch[open] summary{color:var(--accent); border-color:var(--accent);}
.menu-panel{
  position:absolute; top:calc(100% + 12px); right:0; z-index:45;
  min-width:212px; padding:12px 0;
  background:var(--card); border:1px solid var(--line); border-radius:2px;
  box-shadow:0 22px 52px -24px rgba(22,51,48,.5);
}
.menu-panel ul{display:block; overflow:visible; gap:0;}
.menu-panel li + li{border-top:1px solid var(--bg-2);}
.menu-panel a{display:block; padding:11px 22px; font-size:16px;}
.menu-panel a:hover{background:var(--bg-2); color:var(--accent);}
nav a:hover{color:var(--accent);}
/* the current language is the control; the other five wait behind it */
.lang-switch{position:relative; font-size:13px; letter-spacing:.03em; text-transform:uppercase;}
.lang-switch summary{
  list-style:none; cursor:pointer; color:var(--accent);
  padding:3px 2px; border-bottom:1px solid var(--accent); transition:.2s ease;
}
.lang-switch summary::-webkit-details-marker{display:none;}
.lang-switch summary::after{content:'\25BE'; margin-left:6px; font-size:9px; vertical-align:2px;}
.lang-switch summary:hover{color:var(--ink);border-color:var(--ink);}
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:40;
  display:flex; flex-direction:column; gap:2px;
  padding:10px 4px; min-width:66px;
  background:var(--card); border:1px solid var(--line); border-radius:2px;
  box-shadow:0 16px 40px -22px rgba(22,51,48,.45);
}
.lang-menu a{
  color:var(--ink-soft); text-decoration:none; padding:5px 12px; text-align:center;
  transition:.15s ease;
}
.lang-menu a:hover{color:var(--accent); background:var(--bg-2);}

@media (max-width:760px){
  nav{padding:14px 20px;}
  .brand{font-size:17px;gap:10px;}
  .brand-mark{width:38px;height:38px;}
  /* on a phone the menu sits on its own row and is read at arm's length, so
     the outline is already plain to see; the fill is for the desktop header,
     where it was getting lost */
  .menu-switch summary{
    background:none; color:var(--accent);
    border:1px solid var(--accent); border-radius:2px;
    padding:9px 18px 9px 16px;
  }
  .menu-switch summary:hover,.menu-switch summary:focus-visible,
  .menu-switch[open] summary{
    background:var(--bg-2); color:var(--accent); border-color:var(--accent);
  }
}

/* Narrow phones keep the same header as wide ones: one row, the name on the
   left and the tools on the right. At 360px it was 17px short of fitting, so
   the gaps give that back — nothing changes size, it only draws closer. */
@media (max-width:384px){
  nav{padding:14px 16px;}
  .brand{gap:8px;}
  .brand-mark{width:34px;height:34px;}
  .nav-tools{gap:14px;}
}

/* Hero */
.hero{
  position:relative;
  padding:110px 0 90px;
  overflow:hidden;
  background:var(--bg);
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 82% 8%, rgba(79,184,168,.22), transparent 60%),
    radial-gradient(ellipse 55% 45% at 8% 95%, rgba(124,136,148,.20), transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(79,184,168,.08), transparent 70%);
  background-size:180% 180%, 180% 180%, 160% 160%;
  background-repeat:no-repeat;
  animation:drift 26s ease-in-out infinite alternate;
}
.hero-bg::after{
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.85  0 0 0 0 0.65  0 0 0 0 0.22  0 0 0 20 -12'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  opacity:.55;
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{
  0%{opacity:.35;}
  100%{opacity:.6;}
}
@keyframes drift{
  0%  {background-position:80% 0%, 10% 100%, 40% 40%;}
  50% {background-position:65% 20%, 25% 80%, 60% 55%;}
  100%{background-position:85% 10%, 5% 95%, 45% 60%;}
}
.hero-bg .orb{
  position:absolute; border-radius:50%; filter:blur(60px);
  opacity:.5; will-change:transform;
}
.hero-bg .orb-1{width:280px;height:280px;left:6%;top:18%;background:var(--accent-2);
  animation:float-a 17s ease-in-out infinite;}
.hero-bg .orb-2{width:380px;height:380px;right:4%;top:-6%;background:var(--accent);
  opacity:.4; animation:float-b 21s ease-in-out infinite;}
.hero-bg .orb-3{width:220px;height:220px;left:38%;bottom:-8%;background:var(--accent-2);
  opacity:.42; animation:float-a 19s ease-in-out infinite reverse;}
@keyframes float-a{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(24px,-18px) scale(1.08);}
}
@keyframes float-b{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-20px,22px) scale(.94);}
}
.hero-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;z-index:0;opacity:.5;}
.hero-wave path{
  fill:none; stroke:var(--accent-2); stroke-width:1.2; stroke-linecap:round;
  opacity:.55; stroke-dasharray:6 10; animation:wave-shift 14s linear infinite;
}
.hero-wave path:nth-child(2){stroke:var(--accent); opacity:.35; animation-duration:19s; animation-direction:reverse;}
@keyframes wave-shift{to{stroke-dashoffset:-320;}}
@media (prefers-reduced-motion:reduce){
  .hero-bg, .hero-bg .orb, .hero-bg::after, .hero-wave path, .hero h1{animation:none !important;}
}
.hero-inner{max-width:920px;margin:0 auto;padding:0 28px;position:relative;z-index:1;}
.hero-flex{display:flex;align-items:center;justify-content:space-between;gap:52px;}
.hero-text{flex:1 1 520px;min-width:0;}
.hero-photo{flex:0 0 280px;display:flex;flex-direction:column;align-items:center;gap:20px;}
.hero-photo .kicker{
  /* letter-spacing leaves a gap after the last letter too, so centred text
     lands half a space to the left of the photograph below it — the negative
     right margin takes that phantom space back out of the centring */
  margin:0 -.18em 0 0; font-size:12px; letter-spacing:.18em; text-align:center;
}
.kicker-mobile{display:none;}
.hero-photo-frame{position:relative;width:100%;max-width:280px;}
.hero-photo-frame img{
  width:100%;height:auto;display:block;
  border-radius:3px;
  box-shadow:0 24px 60px -18px rgba(22,51,48,.4), 0 0 0 1px rgba(255,255,255,.7);
}
.hero-photo-frame::after{
  content:'';
  position:absolute; inset:0;
  border-radius:3px;
  background:radial-gradient(ellipse at 50% 22%, #fffcf3, #fff2da 75%);
  mix-blend-mode:multiply;
  opacity:.7;
  pointer-events:none;
}
@media (max-width:760px){
  .hero-flex{flex-direction:column-reverse;gap:36px;}
  .hero-photo{flex:0 0 auto;width:100%;}
  .hero-photo-frame{width:62%;max-width:230px;}
  .kicker-desktop{display:none;}
  .kicker-mobile{display:block;}
}
.kicker{
  text-transform:uppercase;letter-spacing:.22em;font-size:13px;
  color:var(--accent-2); font-family:'EB Garamond',serif; font-weight:600;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(42px,7vw,74px);line-height:1.05;
  background:linear-gradient(100deg,
    var(--ink) 30%, #f2d488 44%, #fff4d6 50%, #f2d488 56%, var(--ink) 70%);
  /* The sweep must travel exactly one tile, or the loop snaps back and a
     second copy of the band drifts into view — hence a fixed tile width and
     a shift of the same number. Linear, too: easing makes the band stop dead
     at the seam before starting again. */
  background-size:1000px 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 4.4s linear infinite;
}
@keyframes shimmer{
  /* position grows, so the band travels left to right — from the first name
     towards the surname, the way it read before */
  from{background-position:0 0;}
  to{background-position:1000px 0;}
}
.hero h1 em{font-style:italic;color:var(--accent);-webkit-text-fill-color:var(--accent);}
.hero p.lead{
  margin-top:22px;max-width:560px;font-size:21px;color:var(--ink-soft);
}
.hero .cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;}

/* Audio intro */
.audio-btn{
  display:inline-flex; align-items:center; gap:11px;
  background:none; border:0; padding:4px 0; cursor:pointer;
  font-family:'EB Garamond', Georgia, serif; font-size:16px;
  letter-spacing:.02em; color:var(--ink-soft); transition:.2s ease;
}
.audio-btn:hover{color:var(--accent);}
.audio-icon{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  transition:.2s ease;
}
.audio-btn:hover .audio-icon{background:var(--accent);}
.audio-icon::before{
  content:'';
  border-left:9px solid var(--accent);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  margin-left:3px;
  transition:.2s ease;
}
.audio-btn:hover .audio-icon::before{border-left-color:#fff;}
.audio-btn.is-playing .audio-icon::before{
  border:0; width:3px; height:13px; margin-left:-4px;
  background:var(--accent); box-shadow:7px 0 0 var(--accent);
}
.audio-btn.is-playing:hover .audio-icon::before{
  background:#fff; box-shadow:7px 0 0 #fff;
}
.audio-dur{font-size:13px; letter-spacing:.05em; color:var(--accent-2); font-variant-numeric:tabular-nums;}
.btn{
  display:inline-block;padding:13px 26px;border-radius:2px;
  font-family:'EB Garamond',serif;font-size:17px;letter-spacing:.02em;
  text-decoration:none;border:1px solid var(--ink);
  transition:.2s ease;
}
.btn-solid{background:var(--accent);color:#ffffff;border-color:var(--accent);}
.btn-solid:hover{background:var(--accent-2);border-color:var(--accent-2);}
.btn-outline{color:var(--ink);border-color:var(--ink-soft);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}

.cello-mark{position:absolute;right:-40px;top:20px;width:260px;opacity:.5;}
@media (max-width:760px){.cello-mark{display:none;}}

/* Sections */
section{padding:78px 0;border-top:1px solid var(--line);}
.section-head{margin-bottom:44px;}
.section-head .kicker{margin-bottom:10px;}
.section-head h2{font-size:clamp(28px,4vw,38px);}
.section-head::after{
  content:'';
  display:block; width:9px;height:9px;
  background:var(--accent); transform:rotate(45deg);
  margin-top:18px;
}

/* Collapsible sections: the heading always shows, the reading is opt-in */
.fold summary{list-style:none; cursor:pointer; display:block;}
/* a folded section shows the real opening, cut mid-thought and faded out,
   so it reads as a text that continues rather than a section with one line */
.fold-teaser{
  margin:20px 0 0; max-width:620px; color:var(--ink-soft);
  line-height:1.75; max-height:7em; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 48%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 48%,transparent 100%);
}
.fold[open] .fold-teaser{display:none;}
.fold summary::-webkit-details-marker{display:none;}
.fold summary .section-head{margin-bottom:0;}
/* the section toggles are proper buttons; the gallery's stays a quiet link
   so it does not compete with the order button above it */
.fold-toggle{
  display:inline-block; margin-top:22px;
  font-family:'EB Garamond',serif; font-size:16px; letter-spacing:.02em;
  color:var(--accent); white-space:nowrap; transition:.2s ease;
  padding:11px 24px; border:1px solid var(--accent); border-radius:2px;
}
.fold summary:hover .fold-toggle,
.fold summary:focus-visible .fold-toggle{background:var(--bg-2);}
/* Once open, the only control is the one at the end — reading runs downward,
   and a second button under the heading only pushed the text away from it.
   A summary whose sole content was that button disappears with it. */
.fold[open] .fold-toggle{display:none;}
.fold[open] summary:not(:has(.section-head)){display:none;}
.fold-gallery .fold-toggle{
  margin-top:0; padding:0 0 3px; border:0; border-bottom:1px solid var(--line);
  color:var(--accent);
}
.fold summary:hover .fold-toggle,
.fold summary:focus-visible .fold-toggle{border-color:var(--accent);}
.fold-toggle::after{content:'\2193'; margin-left:8px; display:inline-block; transition:transform .2s ease;}
.fold[open] .fold-toggle::after{transform:rotate(180deg);}
.fold .fold-o{display:none;}
.fold[open] .fold-c{display:none;}
.fold[open] .fold-o{display:inline;}
.fold-body{margin-top:44px;}
.fold-close{
  display:inline-block; margin-top:30px; cursor:pointer;
  background:none; color:var(--accent);
  font-family:'EB Garamond',serif; font-size:16px; letter-spacing:.02em;
  padding:11px 24px; border:1px solid var(--accent); border-radius:2px;
  transition:.2s ease;
}
/* the same arrow as the toggle above, already pointing back up */
.fold-close::after{content:'\2191'; margin-left:8px; display:inline-block;}
.fold-close:hover,.fold-close:focus-visible{border-color:var(--accent); color:var(--accent);}

/* About */
.about-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:56px;align-items:start;}
@media (max-width:760px){.about-grid{grid-template-columns:1fr;}}
.about-grid p + p{margin-top:18px;}
.about-grid > div > p:first-of-type::first-letter{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;
  font-size:3.6em;
  line-height:.78;
  float:left;
  padding:5px 9px 0 0;
  color:var(--accent);
}
/* Solo videos */
.video-list{display:flex;flex-direction:column;gap:52px;}
/* the gallery is a drawer: closed it costs one line, and the photographs
   are only fetched once somebody opens it */
/* the event's own description, folded: long, and only for whoever wants it */
.event-note{margin:0 0 46px; max-width:620px;}
.event-note .fold-body{margin-top:26px;}
.event-note p{margin:0 0 16px; color:var(--ink-soft);}
.event-lead{font-family:'Playfair Display',Georgia,serif; font-size:20px;
  font-style:italic; color:var(--ink) !important;}
.event-leads{margin:0 0 16px; padding-left:20px; color:var(--ink-soft);}
.event-leads li{margin-bottom:6px;}
/* the invitation that closes the evening's description: it answers the lead
   line at the top, so it is set in the same italic rather than as body text */
.event-close{
  margin-top:26px; font-family:'Playfair Display',Georgia,serif;
  font-size:19px; font-style:italic; color:var(--ink); max-width:560px;
}

/* interviews elsewhere: the title leads, the outlet names itself beneath */
.media-list{list-style:none; margin:0; padding:0; max-width:620px;}
.media-list li{padding:18px 0; border-top:1px solid var(--line);}
.media-list li:first-child{border-top:0; padding-top:0;}
.media-list a{
  display:block; color:var(--ink); text-decoration:none; font-size:19px;
  line-height:1.45; transition:.2s ease;
}
.media-list a:hover{color:var(--accent);}
/* One item in this list is not an article about her but her own poems, so it
   opens in place instead of leading away. Its title stays visible when open —
   it is the control for closing it again. */
.media-pub summary{list-style:none; cursor:pointer;}
.media-pub summary::-webkit-details-marker{display:none;}
/* These are folds inside a fold. The rule that hides a summary once its
   section is open reaches every summary within it, so these two lines
   vanished the moment Žiniasklaidoje was opened — they must stay. */
#media .media-pub details > summary{display:block;}
.media-title{
  display:block; color:var(--ink); font-size:19px; line-height:1.45;
  transition:.2s ease;
}
.media-title::after{
  content:'\2193'; margin-left:9px; display:inline-block;
  color:var(--accent); transition:transform .2s ease;
}
.media-pub details[open] .media-title::after{transform:rotate(180deg);}
.media-pub summary:hover .media-title,
.media-pub summary:focus-visible .media-title{color:var(--accent);}
.media-pub .fold-body{margin-top:26px;}
.media-pub .gallery-credit{margin-top:14px;}
.media-pub .fold-close{margin-top:28px;}
/* the one photograph in Apdovanojimai: the sentence above it says she has had
   the presidents' thanks, and this is that sentence happening */
#awards .award-photo{margin-top:30px;}
#awards .gallery-credit{margin-top:14px;}
.media-source{
  display:block; margin-top:7px; color:var(--ink-soft);
  font-size:14px; letter-spacing:.04em; text-transform:uppercase;
}
.event-meta strong{color:var(--ink); font-weight:600;}

/* a vertical film: held to a portrait card so it does not tower on desktop */
.video-upright{max-width:380px; margin:66px 0 46px;}

@media (max-width:760px){ .video-upright{max-width:78%;} }

#gallery .fold-gallery{margin:0;}
#gallery .gallery-lead{margin-top:26px;}
#gallery .gallery-lead.fold-body{margin-top:44px;}
#gallery .gallery + .gallery-credit{margin-top:14px;}
/* a credit belongs to the photographs above it, so the air goes below it —
   that is what separates one photographer's group from the next */
#gallery .gallery-credit + .gallery{margin-top:56px;}
#gallery .gallery-credit + .fold-gallery{margin-top:40px;}
/* No filled colour here. Kontaktai sits directly below with its emerald
   gradient, and any coloured block above it halves that section's effect —
   so the gallery takes the outline the rest of the page uses, and the foot
   of the page has exactly one block of colour. */
#gallery .fold-toggle{
  /* a doubled rule holds the eye without adding a second block of colour */
  display:inline-block; margin:0; padding:12px 25px;
  background:none; color:var(--accent);
  border:2px solid var(--accent); border-radius:2px;
  font-family:'EB Garamond',serif; font-size:17px; letter-spacing:.02em;
  transition:.2s ease;
}
#gallery summary:hover .fold-toggle,
#gallery summary:focus-visible .fold-toggle{
  background:var(--bg-2); color:var(--accent);
}
.video-wrap{
  position:relative; padding-top:56.25%; height:0; overflow:hidden;
  border-radius:4px; background:var(--card);
  box-shadow:0 24px 60px -18px rgba(22,51,48,.35), 0 0 0 1px var(--line);
}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* a portrait film needs a portrait frame, or YouTube pillarboxes it */
.video-upright .video-wrap{padding-top:177.78%;}
.video-link{
  position:relative; display:block; border-radius:4px; overflow:hidden;
  aspect-ratio:16/9;
  box-shadow:0 24px 60px -18px rgba(22,51,48,.35), 0 0 0 1px var(--line);
}
.video-link img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
.video-link::after{
  content:''; position:absolute; inset:0;
  background:rgba(22,51,48,.14); transition:background .25s ease;
}
.video-link:hover::after{background:rgba(22,51,48,0);}
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background .25s ease;
  z-index:1;
}
.video-play::before{
  content:'';
  border-left:21px solid var(--accent);
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  margin-left:6px;
}
.video-link:hover .video-play{transform:translate(-50%,-50%) scale(1.07);background:#fff;}
.video-caption{margin-top:18px;color:var(--ink-soft);font-size:16px;}

/* Poetry */
/* The poem comes first and the book's facts follow it: whoever reads the
   section meets a poem, not a bibliography, and the publisher, the journal
   and the order button then stand together as one answer to "where do I
   get this?" */
.poetry-intro{margin:0 0 6px; max-width:560px; color:var(--ink-soft);}
.poetry-intro em{color:var(--ink); font-style:italic;}
/* the line is also the way there: it opens this publication inside
   Žiniasklaidoje rather than repeating it here */
.poetry-pub a{color:inherit; text-decoration:none;
  border-bottom:1px solid var(--line); transition:.2s ease;}
.poetry-pub a:hover,.poetry-pub a:focus-visible{color:var(--accent); border-color:var(--accent);}
.poetry-pub{margin:0 0 26px; max-width:560px; font-size:14px;
  letter-spacing:.02em; color:var(--accent-2);}
.poems{margin-bottom:44px;}

/* the order button belongs to the poem above it, so it sits close */
.book-buy{margin:0 0 56px;}
.book-buy .btn{margin-bottom:16px;}
.book-buy-note{margin:0; max-width:540px; font-size:15px; color:var(--ink-soft);}
.book-meta{margin:10px 0 0; font-size:14px; letter-spacing:.02em; color:var(--accent-2);}
.poem{margin:0 0 48px; max-width:540px;}
.poem:last-child{margin-bottom:0;}
.poem-title{
  font-family:'Playfair Display', Georgia, serif; font-weight:600;
  font-size:21px; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 24px;
}
.poem-stanza{
  margin:0 0 22px; font-size:19px; line-height:1.9;
  /* a line too long for the column continues indented, not as a new verse */
  padding-left:1.5em; text-indent:-1.5em;
}
.poem-meta{margin:26px 0 0; font-size:15px; font-style:italic; color:var(--ink-soft);}

.gallery{column-count:2; column-gap:18px;}
/* one photograph carries the section; the rest wait behind a click */
.gallery-lead{column-count:1; max-width:540px;}
.fold-gallery{margin-top:6px;}
.fold-gallery .fold-body{margin-top:22px;}
.fold-gallery + .gallery-credit{margin-top:18px;}
.gallery figure{break-inside:avoid; margin:0 0 18px;}
/* The Philharmonic group reads one way on a phone and another on two columns.
   The markup keeps the phone's order; above 760px a small grid puts the
   upright portrait back under the first photograph, so the four sit 2 + 2
   instead of the portrait claiming a whole column to itself. */
@media (min-width:761px){
  #gallery .gallery-fil{
    column-count:auto; display:grid; grid-template-columns:1fr 1fr;
    column-gap:18px; row-gap:0; align-items:start;
  }
  /* backstage opens the group, the two orchestra photographs are kept apart,
     and the wide one closes it across both columns so no corner is left bare */
  #gallery .gallery-fil figure:nth-child(2){grid-column:1; grid-row:1;}
  #gallery .gallery-fil figure:nth-child(3){grid-column:2; grid-row:1;}
  #gallery .gallery-fil figure:nth-child(4){grid-column:1; grid-row:2;}
  #gallery .gallery-fil figure:nth-child(5){grid-column:2; grid-row:2;}
  #gallery .gallery-fil figure:nth-child(1){grid-column:1 / -1; grid-row:3;}
}
.gallery img{
  width:100%; height:auto; display:block; border-radius:3px;
  box-shadow:0 18px 44px -20px rgba(22,51,48,.35), 0 0 0 1px var(--line);
}
.gallery-credit{
  margin-top:8px; color:var(--ink-soft); font-size:15px; letter-spacing:.02em;
}
@media (max-width:760px){

  .poem-stanza{font-size:17px;}
  .gallery{column-count:1;}
}

blockquote{
  position:relative;
  margin:0; padding:30px 30px 30px 58px; border-left:3px solid var(--accent);
  font-style:italic; color:var(--ink); font-size:21px; background:var(--card);
}
blockquote::before{
  content:'„';
  position:absolute; left:16px; top:2px;
  font-family:'Playfair Display', Georgia, serif;
  font-size:64px; line-height:1; color:var(--accent); opacity:.3;
}
blockquote footer{
  margin-top:12px;font-style:normal;font-size:15px;color:var(--ink-soft);
  letter-spacing:.03em;
}

/* Timeline / education */
.timeline{list-style:none;margin:0;padding:0;}
.timeline li{
  position:relative;padding:0 0 30px 32px;border-left:1px solid var(--line);
}
.timeline li:last-child{border-left:1px solid transparent;padding-bottom:0;}
.timeline li::before{
  content:'';position:absolute;left:-5px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--accent);
}
.timeline h3{font-size:20px;margin-bottom:4px;}
.timeline .meta{color:var(--accent-2);font-size:15px;letter-spacing:.02em;margin-bottom:6px;}
.timeline p{margin:0;color:var(--ink-soft);}

/* Ensembles cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:760px){.cards{grid-template-columns:1fr;}}
.card{
  background:var(--card);border:1px solid var(--line);padding:28px 24px;
}
.card h3{font-size:21px;margin-bottom:10px;}
.card p{color:var(--ink-soft);margin:0;font-size:17px;}

/* Awards */
.awards p{color:var(--ink-soft);}
.awards ul{padding-left:20px;margin:18px 0 0;color:var(--ink-soft);}
.awards li{margin-bottom:8px;}

/* Contact */
.contact-box{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border:1px solid var(--line);
  color:#ffffff; padding:56px 48px;
  display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
}
.contact-box h2{color:#ffffff;}
.contact-box p{color:rgba(255,255,255,.85);margin-top:10px;max-width:420px;}
.contact-links{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.contact-links a{color:#ffffff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;}
.contact-links a:hover{border-color:#ffffff;}
.socials{display:flex; gap:14px; align-items:center;}
.back-top{
  color:#ffffff; text-decoration:none; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px;
}
.back-top:hover{border-color:#ffffff;}
.social{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  color:#ffffff; border:1px solid rgba(255,255,255,.45);
  transition:.2s ease;
}
.social:hover,.social:focus-visible{background:#ffffff; color:var(--accent); border-color:#ffffff;}
@media (max-width:760px){
  .socials{margin-top:4px;}
  /* the arrow closes the box, well clear of the icons above it */
  .back-top{margin-top:16px;}
}

footer.site{padding:54px 0 40px;text-align:center;color:var(--ink-soft);font-size:15px;}
footer.site p{margin:0;}
/* the monogram is gold on white, so multiply drops the white out */
.site-mark{
  display:block; margin:0 auto 24px;
  width:80px; height:80px;
  mix-blend-mode:multiply;
}
/* the mark's own story, kept behind a quiet line so the foot stays calm */
#zenklas .fold{max-width:560px; margin:0 auto;}
#zenklas{margin-bottom:26px;}
/* The rule runs under the whole control, arrow included, with the same small
   margin at each end — so it reads as one line under one thing rather than a
   line under the words with the arrow hanging off it. */
#zenklas .fold-toggle{
  margin-top:0; padding:0 6px 5px; border:0;
  border-bottom:1.5px solid var(--accent);
  border-radius:0; background:none; font-size:15px; color:var(--ink-soft);
}
#zenklas summary:hover .fold-toggle,
#zenklas summary:focus-visible .fold-toggle{color:var(--accent); background:none;}
#zenklas .fold-body{margin-top:26px; text-align:left;}
#zenklas .fold-body p{margin:0 0 16px; line-height:1.75;}
#zenklas .fold-body p:last-child{margin-bottom:0;}
.mark-title{
  margin:0 0 22px; font-family:'Playfair Display',Georgia,serif;
  font-size:21px; font-weight:600; color:var(--ink);
}
/* the short lines she set apart keep their own breath */
.mark-beat{font-style:italic; color:var(--ink) !important; line-height:1.9 !important;}
.mark-cry{
  margin-top:26px !important; font-family:'Playfair Display',Georgia,serif;
  font-size:18px; font-style:italic; color:var(--accent-muted) !important;
}
#zenklas .fold-body em{color:var(--ink); font-style:italic;}
#zenklas .fold-close{margin-top:26px; font-size:15px;}

@media (max-width:760px){
  .site-mark{width:64px;height:64px;margin-bottom:20px;}
}

::selection{background:var(--accent);color:#ffffff;}