/* ============================================================
   ПАЛИТРАТА НА ХРИСТИЯНА — пейн сиво, охра и капка червено
   ============================================================ */
:root{
  --paper:      #FCFAF3;   /* бяла акварелна хартия */
  --paper-deep: #F4EFE2;   /* хартия в сянка */
  --indigo:     #2B3548;   /* индиго / пейн сиво — нейното „черно“ */
  --payne:      #56637B;   /* пейн сиво, разредено */
  --ochre:      #C08A2D;   /* охра — нейните пръски */
  --sienna:     #9C6B3F;   /* сурова сиена — дакелът */
  --red:        #C4402C;   /* червено — само за очи и гребени */
  --pencil:     #7C808A;   /* графитен молив */

  --font-display: 'Cormorant', serif;
  --font-hand:    'Caveat', cursive;
  --font-body:    'Sofia Sans', sans-serif;

  /* мастилото ВЪРХУ белите листове — еднакво и в двете теми,
     защото хартията на картините си остава бяла и нощем */
  --card-ink:    #2B3548;
  --card-pencil: #7C808A;
  --card-mood:   #B5822B;
}

/* ============================================================
   НОЩНА ТЕМА — „готическа нощ в ателието“
   ============================================================ */
[data-theme="night"]{
  --paper:      #141321;   /* виолетово-черно, като нощ през витраж */
  --paper-deep: #0D0C16;   /* криптата на страницата */
  --indigo:     #E9E3D3;   /* мастилото става стар пергамент */
  --payne:      #8D9BB8;   /* лунно сиво-синьо */
  --ochre:      #C9A24B;   /* антично злато — свещ и рамка на икона */
  --sienna:     #B98A5A;
  --red:        #C9563C;   /* жарава */
  --pencil:     #9A9DB0;   /* тебешир */
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

/* Мек преход между страниците вместо премигване (View Transitions — браузърът
   го прави сам, без JavaScript). Firefox още го няма: там просто няма преход.
   Уважава системната настройка „по-малко движение“. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
}

body{
  font-family:var(--font-body);
  font-weight:300;
  font-size:1.075rem;
  line-height:1.75;
  color:var(--indigo);
  background:var(--paper);
  overflow-x:hidden;
  transition:background-color .6s ease, color .6s ease;
}

/* нощни настройки на общите елементи */
[data-theme="night"] body::after{ opacity:.07; }
[data-theme="night"] ::selection{ background:rgba(201,162,75,.32); }
[data-theme="night"] nav.scrolled{ background:rgba(20,19,33,.94); }
[data-theme="night"] .section-title em{ color:var(--ochre); } /* курсивът става златен */
[data-theme="night"] .brush-link{ background-image:linear-gradient(120deg, rgba(201,162,75,.4), rgba(141,155,184,.3)); }
[data-theme="night"] .dab{ box-shadow:0 0 0 1px rgba(233,227,211,.22); }
/* заглавията минават на унициал — като заглавки от стар ръкопис */
[data-theme="night"] .hero h1,
[data-theme="night"] .section-title{
  font-family:'Cormorant Unicase', 'Cormorant', serif;
  letter-spacing:.04em;
}
/* филигранен орнамент под заглавията на секциите */
[data-theme="night"] .section-head::after{
  content:'';
  display:block;
  width:200px; height:12px;
  margin-top:1.1rem;
  opacity:.55;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12'><g stroke='%23C9A24B' fill='none'><line x1='0' y1='6' x2='96' y2='6'/><line x1='124' y1='6' x2='220' y2='6'/><rect x='105' y='1' width='10' height='10' transform='rotate(45 110 6)'/></g></svg>") no-repeat center/contain;
}
[data-theme="night"] .contact .section-head::after{ margin-left:auto; margin-right:auto; }
/* нощни мъгли вместо дневни петна */
[data-theme="night"] .bloom-indigo{ background:radial-gradient(closest-side, rgba(141,155,184,.18), rgba(141,155,184,.1) 36%, rgba(141,155,184,.04) 66%, transparent 92%); }
[data-theme="night"] .bloom-ochre { background:radial-gradient(closest-side, rgba(201,162,75,.27), rgba(201,162,75,.15) 36%, rgba(201,162,75,.05) 66%, transparent 92%); }
[data-theme="night"] .bloom-payne { background:radial-gradient(closest-side, rgba(146,126,200,.16), rgba(146,126,200,.09) 36%, rgba(146,126,200,.03) 66%, transparent 92%); }
[data-theme="night"] .bloom-sienna{ background:radial-gradient(closest-side, rgba(185,138,90,.14), rgba(185,138,90,.08) 36%, rgba(185,138,90,.03) 66%, transparent 92%); }
/* нощем листовете хвърлят истинска сянка */
[data-theme="night"] .paper-card{ box-shadow:0 14px 30px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.45); }

/* ---- СВЕЩТА В ТЪМНАТА ГАЛЕРИЯ ----
   В покой листовете тлеят — стоплени колкото да се четат в мрака.
   Пълната топла светлина пламва там, докъдето посегнеш: мишката е свещта. */
[data-theme="night"] .gallery .sheet .paper-card{
  transition:transform .5s ease, filter .9s ease, box-shadow .9s ease;
  filter:brightness(.5) saturate(.72);            /* тлее — тъмно, но четимо */
}
[data-theme="night"] .gallery .sheet .paper-card::before{
  transition:background .9s ease;
  background:#171522;                              /* хартията дреме в сумрак */
}
/* топлото петно на свещта — меко сияние, което „пада“ отгоре върху листа */
[data-theme="night"] .gallery .sheet .paper-card::after{
  box-shadow:0 22px 44px rgba(0,0,0,.7);
  background:radial-gradient(125% 95% at 50% 18%, rgba(216,170,76,.42), rgba(216,170,76,.14) 46%, transparent 72%);
  opacity:0;
  transition:opacity .9s ease;
  z-index:1;                                       /* сиянието ляга ВЪРХУ картината, топло */
  mix-blend-mode:soft-light;
}
/* при идване на екрана — лек живот, само колкото да не е угаснало */
[data-theme="night"] .gallery .sheet.lit .paper-card{ filter:brightness(.66) saturate(.82); }
[data-theme="night"] .gallery .sheet.lit .paper-card::before{ background:#2A2536; }
[data-theme="night"] .gallery .sheet.lit .paper-card::after{ opacity:.28; }
/* ПОСОЧВАНЕ = доближена свещ: листът пламва напълно и се повдига към теб */
[data-theme="night"] .gallery .sheet:hover .paper-card,
[data-theme="night"] .gallery .sheet:focus-visible .paper-card{
  filter:brightness(1.04) saturate(1.05);
  transform:translateY(-9px);
}
[data-theme="night"] .gallery .sheet:hover .paper-card::before,
[data-theme="night"] .gallery .sheet:focus-visible .paper-card::before{ background:#F7F2E6; }
[data-theme="night"] .gallery .sheet:hover .paper-card::after,
[data-theme="night"] .gallery .sheet:focus-visible .paper-card::after{ opacity:1; }
/* ============================================================
   ЗА ТЕСНИ ЕКРАНИ (телефони) - картините са направо осветени
   ============================================================ */
@media (max-width: 800px) {
  [data-theme="night"] .gallery .sheet .paper-card {
    filter: brightness(1.04) saturate(1.05) !important;
    transform: translateY(0) !important; /* Предотвратява "залепването" нагоре при докосване */
  }
  [data-theme="night"] .gallery .sheet .paper-card::before {
    background: #F7F2E6 !important;
  }
  [data-theme="night"] .gallery .sheet .paper-card::after {
    opacity: 1 !important;
  }
}

/* Зърно на хартията */
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.055; /* без mix-blend-mode: то караше браузъра да пресмесва целия екран на всеки кадър */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

::selection{ background:rgba(192,138,45,.3); }

a{ color:inherit; }
img{ max-width:100%; display:block; }

:focus-visible{
  outline:2px dashed var(--indigo);
  outline-offset:4px;
  border-radius:2px;
}

/* ============================================================
   НАВИГАЦИЯ
   ============================================================ */
nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1.2rem, 4vw, 3rem);
  transition:background .4s ease, box-shadow .4s ease;
}
nav.scrolled{
  background:rgba(252,250,243,.94); /* по-плътен фон вместо backdrop-filter — блърът зад елемента е скъп при скрол */
  box-shadow:0 1px 0 rgba(43,53,72,.08);
}
.nav-logo{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-hand);
  font-size:1.7rem;
  font-weight:500;
  text-decoration:none;
  color:var(--indigo);
}
.nav-logo span{ color:var(--red); }
.nav-cat{ width:1.9rem; height:auto; display:block; }
.nav-links{ display:flex; gap:clamp(1rem, 3vw, 2.4rem); }
.nav-links a,
.mobile-links a{
  font-size:.94rem;
  letter-spacing:.14em;
  text-transform:lowercase;
  text-decoration:none;
  color:var(--pencil);
  padding-bottom:.15rem;
  background:linear-gradient(to right, var(--ochre), var(--payne)) no-repeat left bottom / 0% 2px;
  transition:background-size .35s ease, color .35s ease;
}
.nav-links a:hover,
.mobile-links a:hover{ color:var(--indigo); background-size:100% 2px; }

/* ============================================================
   ХИРО — мокра хартия + главният инспектор на ателието
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  /* долното поле пази мястото на „надолу“ (капката е закачена за долния ръб) —
     иначе надписът под котката ляга върху нея */
  padding:6rem 1.5rem 9rem;
  overflow:hidden;
}

.blooms{ position:absolute; inset:0; z-index:0; }
/* Мекотата идва от самия градиент, не от blur() — изглежда същото, струва в пъти по-малко */
.bloom{
  position:absolute;
  border-radius:50%;
  will-change:transform;
  transform:translateZ(0);
}
.bloom-indigo{
  width:64vmin; height:56vmin; right:0%; top:4%;
  background:radial-gradient(closest-side, rgba(43,53,72,.34), rgba(43,53,72,.2) 36%, rgba(86,99,123,.07) 66%, transparent 92%);
  animation:drift 30s ease-in-out infinite alternate;
}
.bloom-ochre{
  width:58vmin; height:50vmin; left:4%; top:16%;
  background:radial-gradient(closest-side, rgba(192,138,45,.38), rgba(192,138,45,.2) 36%, rgba(192,138,45,.07) 66%, transparent 92%);
  animation:drift 26s ease-in-out infinite alternate-reverse;
}
.bloom-payne{
  width:48vmin; height:44vmin; right:20%; bottom:6%;
  background:radial-gradient(closest-side, rgba(86,99,123,.32), rgba(86,99,123,.18) 36%, rgba(86,99,123,.06) 66%, transparent 92%);
  animation:drift 24s ease-in-out 3s infinite alternate;
}
.bloom-sienna{
  width:50vmin; height:44vmin; left:12%; bottom:2%;
  background:radial-gradient(closest-side, rgba(156,107,63,.28), rgba(156,107,63,.16) 36%, rgba(156,107,63,.06) 66%, transparent 92%);
  animation:drift 32s ease-in-out 6s infinite alternate-reverse;
}
/* петната спират да се движат, когато секцията им не се вижда */
.offstage .bloom, .offstage .mist{ animation-play-state:paused !important; }

/* ---- готическа нощ: лунна светлина, арка, мъгла (само в нощната тема) ---- */
.night-sky{
  display:none;
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
}
[data-theme="night"] .night-sky{ display:block; }

/* ЛУННА СВЕТЛИНА за цялата страница — студен светлик, който идва отгоре;
   надолу всичко потъва в мрака. Fixed, за да огрява при скрол цялата страница. */
[data-theme="night"] body::before{
  content:'';
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(150% 95% at 50% -24%, rgba(164,180,212,.34), rgba(130,146,180,.13) 34%, transparent 62%),
    linear-gradient(to bottom, rgba(164,180,212,.16) 0%, transparent 30%),
    radial-gradient(135% 100% at 50% 10%, transparent 44%, rgba(6,5,12,.55) 100%);
}
/* голяма, мъглива, почти скрита луна — усещаш я по-скоро, отколкото я виждаш */
/* голяма, леко стилизирана луна с ръб — не петно, а диск, който се губи в мъгла */
.moon-disc{
  position:absolute; top:-16%; left:50%;
  width:min(60vh, 480px); height:auto;
  transform:translateX(-50%);
  opacity:.5;
  filter:blur(1.5px);
}
/* стрелчата арка — катедрален прозорец зад заглавието; чиста геометрия */
.g-arch{
  position:absolute; left:50%; bottom:3%;
  height:min(88%, 660px);
  aspect-ratio:400 / 600;
  transform:translateX(-50%);
  color:var(--ochre);
  opacity:.2;   /* още по-дискретна — луната и мракът водят */
}
/* мъгла, пълзяща по пода на ателието */
.mist{
  position:absolute; bottom:-6%; left:-22%;
  width:145%; height:38%;
  background:radial-gradient(55% 90% at 50% 100%, rgba(141,155,184,.14), rgba(141,155,184,.05) 55%, transparent 80%);
  animation:mistdrift 46s ease-in-out infinite alternate;
  will-change:transform;
}
.mist.m2{
  left:auto; right:-28%; bottom:-3%;
  height:30%;
  opacity:.8;
  animation-duration:64s; animation-delay:-22s;
  animation-direction:alternate-reverse;
}
@keyframes mistdrift{
  from{ transform:translateX(0); }
  to  { transform:translateX(6%); }
}

/* ---- превключвател ден / нощ ---- */
.nav-right{ display:flex; align-items:center; gap:clamp(.8rem, 2vw, 1.4rem); }
/* Превключвател на езика: показва езика, към който води — един клик и си там.
   Стои до копчето за темата и се вижда и на телефон. */
.lang-switch{
  font-size:.94rem;                 /* прагът за Sofia Sans: усетени 15 */
  letter-spacing:.12em;
  text-decoration:none;
  color:var(--pencil);
  padding:.18rem .45rem;
  border:1px solid var(--line, rgba(124,128,138,.4));
  border-radius:4px;
  line-height:1.4;
  transition:color .3s ease, border-color .3s ease, background-color .3s ease;
}
.lang-switch:hover{
  color:var(--indigo);
  border-color:var(--ochre);
  background:linear-gradient(120deg, rgba(192,138,45,.16), rgba(86,99,123,.12));
}
[data-theme="night"] .lang-switch{ border-color:rgba(154,157,176,.45); }
[data-theme="night"] .lang-switch:hover{ border-color:var(--ochre); }

.theme-toggle{
  background:none; border:none; cursor:pointer;
  color:var(--pencil);
  width:2.2rem; height:2.2rem;
  display:grid; place-items:center;
  border-radius:50%;
  transition:color .3s ease, transform .3s ease;
}
.theme-toggle:hover{ color:var(--indigo); transform:rotate(-14deg); }
.theme-toggle svg{ width:1.25rem; height:1.25rem; }
.icon-sun{ display:none; }
[data-theme="night"] .icon-moon{ display:none; }
[data-theme="night"] .icon-sun{ display:block; }
@keyframes drift{
  0%  { transform:translate(0,0) scale(1); }
  50% { transform:translate(3vmin,-2vmin) scale(1.07); }
  100%{ transform:translate(-2vmin,2.5vmin) scale(.96); }
}

.hero-inner{ position:relative; z-index:1; max-width:56rem; }

.hero-eyebrow{
  font-family:var(--font-hand);
  font-size:clamp(1.28rem, 2.6vw, 1.6rem);
  color:var(--pencil);
  animation:settle 1.4s ease .2s both;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.9rem, 9vw, 6.4rem);
  line-height:1.02;
  letter-spacing:.015em;
  margin:.5rem 0 1rem;
  animation:settle 1.6s ease .45s both;
}
.hero-tagline{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.3rem, 3vw, 1.75rem);
  opacity:.85;
  animation:settle 1.6s ease .8s both;
}

/* котката от логото — оригиналният файл */
.hero-cat{
  margin-top:2.2rem;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  animation:settle 1.8s ease 1.1s both;
}
.hero-cat .logo-mark{ width:clamp(150px, 21vw, 215px); height:auto; }
/* нощем оригиналните тъмни линии се обръщат в пергаментови */
[data-theme="night"] .logo-mark{ filter:invert(1) brightness(1.02); opacity:.94; }
/* Нощем котката се чете спрямо готическата арка. Окото я мери по ГЛАВАТА, а тя
   стои вляво от средата на файла: измерено, центърът на мастилото е на 11.6%
   вляво, а само на главата — на 17.8%. Изместването е между двете, с наклон
   към главата: тя застава почти на оста, а опашката уравновесява вдясно. */
[data-theme="night"] .hero-cat .logo-mark{ transform:translateX(14%); }

/* НИСКИ ЕКРАНИ (обичайният лаптоп): героят е дълъг колкото екрана, затова
   котката и полетата се посвиват — „надолу“ остава видимо, а надписът под
   котката не му се лепва. Високите екрани пазят пълните пропорции.
   (Стои СЛЕД правилата по-горе — при равна специфичност решава редът.) */
@media (min-width: 821px) and (max-height: 900px){
  .hero{ padding-top:5rem; padding-bottom:8rem; }
  .hero-cat{ margin-top:1.2rem; }
  .hero-cat .logo-mark{ width:clamp(120px, 15vw, 168px); }
}
/* нежен светлик зад котката — усилва усещането, че луната е горе; не втори символ */
.moon-ring{ position:relative; display:inline-block; }
.moon-ring::before{
  content:none;
  position:absolute; left:50%; top:44%;
  width:170%; aspect-ratio:1;
  transform:translate(-50%, -50%);
  border-radius:50%;
  z-index:-1;
}
[data-theme="night"] .moon-ring::before{
  content:'';
  background:radial-gradient(closest-side, rgba(225,222,208,.1), rgba(200,200,190,.04) 52%, transparent 72%);
}
.cat-note{
  font-family:var(--font-hand);
  font-size:1.3rem;
  color:var(--pencil);
  transform:rotate(-2deg);
}

@keyframes settle{
  from{ opacity:0; transform:translateY(14px); filter:blur(6px); }
  to  { opacity:1; transform:translateY(0);   filter:blur(0); }
}

.drip{
  position:absolute; bottom:.6rem; left:50%;   /* беше 1.6rem — компенсира долния padding */
  transform:translateX(-50%);
  z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.6rem 2.2rem 1rem;                    /* голяма клик-зона около тънката линия */
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.drip span{ font-family:var(--font-hand); font-size:1.28rem; color:var(--pencil); }
.drip::after{
  content:'';
  width:3px; height:54px;                       /* беше 2px / 48px — по-плътна и по-дълга */
  background:linear-gradient(to bottom, var(--ochre), transparent);
  border-radius:3px;
  animation:dripline 2.6s ease-in-out infinite;
}
@keyframes dripline{
  0%,100%{ transform:scaleY(.55); transform-origin:top; opacity:.62; }  /* беше .5 — по-присъстваща */
  50%    { transform:scaleY(1);   transform-origin:top; opacity:1; }
}

/* ============================================================
   ОБЩИ СЕКЦИИ
   ============================================================ */
section{ padding:clamp(4rem, 9vw, 7.5rem) clamp(1.2rem, 5vw, 4rem); }
.wrap{ max-width:72rem; margin:0 auto; }

.section-head{ margin-bottom:clamp(2.5rem, 6vw, 4.5rem); }
.section-note{
  font-family:var(--font-hand);
  font-size:1.4rem;
  color:var(--pencil);
  display:block;
  transform:rotate(-1.2deg);
}
.section-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.2rem, 5.5vw, 3.6rem);
  line-height:1.1;
}
.section-title em{ font-style:italic; color:var(--red); }

.reveal{
  opacity:0;
  transform:translateY(26px);
  filter:blur(5px);
  transition:opacity 1s ease, transform 1s ease, filter 1s ease;
}
.reveal.in{ opacity:1; transform:none; filter:none; }
/* листовете с накъсани ръбове се проявяват без blur —
   иначе браузърът преизчислява SVG филтъра им на всеки кадър от анимацията */
.sheet.reveal{ filter:none; transition:opacity 1s ease, transform 1s ease; }

/* следи от лапи — котката е минала оттук */
.paw-trail{
  display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(1.6rem, 5vw, 3rem);
  color:var(--ochre);
  opacity:.45;
  padding-top:1.5rem;
}
.paw-trail svg{ width:20px; height:20px; }
.paw-trail svg:nth-child(1){ transform:rotate(14deg)  translateY(14px); }
.paw-trail svg:nth-child(2){ transform:rotate(22deg)  translateY(4px); }
.paw-trail svg:nth-child(3){ transform:rotate(12deg)  translateY(12px); }
.paw-trail svg:nth-child(4){ transform:rotate(24deg)  translateY(0); }
.paw-trail svg:nth-child(5){ transform:rotate(10deg)  translateY(10px); }

/* ============================================================
   ГАЛЕРИЯ — листове, разпилени из ателието
   ============================================================ */
.gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(1.6rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2.6rem);
  align-items:start;
}
.sheet{ text-decoration:none; display:block; }

/* Разпилените листове са РИТЪМ от пет: два едри реда, после три по-малки.
   Схемата се повтаря (5n+…), затова каталог с колкото ще снимки пази вида си
   — преди тези правила свършваха на петата и следващите падаха в автоматично
   разположение (една огромна, друга съвсем дребна). */
.gallery .sheet:nth-child(5n+1){ grid-column:1 / 4; transform:rotate(-1.4deg); }
.gallery .sheet:nth-child(5n+2){ grid-column:4 / 7; transform:rotate(1.1deg);  margin-top:3.5rem; }
.gallery .sheet:nth-child(5n+3){ grid-column:1 / 3; transform:rotate(.9deg);   margin-top:-1rem; }
.gallery .sheet:nth-child(5n+4){ grid-column:3 / 5; transform:rotate(-1deg);   margin-top:2.5rem; }
.gallery .sheet:nth-child(5n+5){ grid-column:5 / 7; transform:rotate(1.6deg);  margin-top:.5rem; }

.paper-card{
  position:relative; z-index:0;
  padding:clamp(.7rem, 1.6vw, 1.1rem);
  box-shadow:0 14px 26px rgba(43,53,72,.12), 0 3px 7px rgba(43,53,72,.06);
  transition:transform .45s ease;
  will-change:transform;
}
/* хартията с накъсания ръб е отделен, НЕанимиран слой —
   браузърът изчислява SVG филтъра веднъж и кешира резултата */
.paper-card::before{
  content:'';
  position:absolute; inset:0;
  background:#fff;
  filter:url(#deckle);
}
/* по-дълбоката сянка при hover се появява само чрез opacity — най-евтината анимация */
.paper-card::after{
  content:'';
  position:absolute; inset:0;
  z-index:-1;
  box-shadow:0 22px 38px rgba(43,53,72,.17), 0 6px 12px rgba(43,53,72,.08);
  opacity:0;
  transition:opacity .45s ease;
}
.paper-card > *{ position:relative; }
.sheet:hover .paper-card,
.sheet:focus-visible .paper-card{ transform:translateY(-7px); }
.sheet:hover .paper-card::after,
.sheet:focus-visible .paper-card::after{ opacity:1; }

.art{ width:100%; height:auto; }

.caption{
  padding:1rem .4rem .2rem;
  display:flex; flex-direction:column; gap:.1rem;
}
.caption h3{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:1.35rem;
  color:var(--card-ink);
}
.caption small{
  font-family:var(--font-hand);
  font-size:1.33rem;
  color:var(--card-pencil);
}
.caption .mood{ color:var(--card-mood); }

.gallery-more{
  margin-top:clamp(3rem, 6vw, 4.5rem);
  text-align:center;
}
.gallery-more .brush-link + .brush-link{ margin-left:1.8rem; }
.brush-link{
  display:inline-block;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.45rem;
  text-decoration:none;
  color:var(--indigo);
  padding:.2rem .5rem;
  background:linear-gradient(120deg, rgba(192,138,45,.35), rgba(86,99,123,.35)) no-repeat left 88% / 100% .55em;
  transition:background-size .35s ease;
}
.brush-link:hover{ background-size:100% 100%; }

/* ============================================================
   ДВУКОЛОННИ СЕКЦИИ (пухкавите / за Християна)
   ============================================================ */
.duo-grid{
  display:grid;
  grid-template-columns:minmax(240px, 5fr) 7fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
.duo-grid .side-sheet{ transform:rotate(-1.8deg); }
.duo-grid .side-sheet .caption{ align-items:center; text-align:center; }

.duo-text p{ margin-bottom:1.25rem; max-width:56ch; font-size:1.12rem; }
.album-intro{ font-size:1.12rem; }
.lead-letter p:first-of-type::first-letter{
  font-family:var(--font-display);
  font-size:3.4em;
  float:left;
  line-height:.82;
  padding-right:.14em;
  color:var(--ochre);
}

/* портретът-плейсхолдър */
.wash-portrait{
  aspect-ratio:3/4;
  filter:url(#bleed) saturate(1.05);
  background:
    radial-gradient(60% 70% at 50% 42%, rgba(43,53,72,.44) 18%, rgba(86,99,123,.35) 52%, transparent 74%),
    radial-gradient(90% 40% at 50% 96%, rgba(192,138,45,.42) 22%, transparent 68%);
  background-color:#fdfcf7;
}

/* палитрата — мазки боя */
.palette{ margin-top:2.6rem; }
.palette h3{
  font-family:var(--font-hand);
  font-weight:500;
  font-size:1.45rem;
  color:var(--pencil);
  margin-bottom:1.2rem;
  transform:rotate(-1deg);
}
.dabs{
  display:flex; flex-wrap:wrap;
  gap:1.6rem 2.2rem;
  list-style:none;
}
.dabs li{ text-align:center; max-width:7.5rem; }
.dab{
  width:58px; height:46px;
  margin:0 auto .45rem;
  filter:url(#bleed);
  border-radius:58% 42% 55% 45% / 48% 60% 40% 52%;
  opacity:.88;
}
.dabs small{
  font-family:var(--font-hand);
  font-size:1.28rem;
  line-height:1.25;
  display:inline-block;
  color:var(--pencil);
}
.dab-indigo { background:var(--indigo); }
.dab-payne  { background:var(--payne); }
.dab-ochre  { background:var(--ochre); }
.dab-sienna { background:var(--sienna); }
.dab-red    { background:var(--red); }

/* ============================================================
   ИНТЕРЛЮДИЯ — цитат върху разлив
   ============================================================ */
.interlude{
  position:relative;
  overflow:hidden;
  text-align:center;
  background:var(--paper-deep);
  transition:background-color .6s ease;
}
.interlude .bloom{ opacity:.75; }
.interlude blockquote{
  position:relative; z-index:1;
  max-width:46rem; margin:0 auto;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.55rem, 3.6vw, 2.4rem);
  line-height:1.45;
}
.interlude cite{
  position:relative; z-index:1;
  display:block;
  margin-top:1.6rem;
  font-family:var(--font-hand);
  font-style:normal;
  font-size:1.4rem;
  color:var(--pencil);
}

/* ============================================================
   КОНТАКТ
   ============================================================ */
.contact{ text-align:center; }
.contact .section-note{ transform:rotate(1.2deg); }
.contact p{ max-width:40rem; margin:1.2rem auto 2.2rem; font-size:1.18rem; }
.contact-mail{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.5rem, 3.5vw, 2.2rem);
}
.socials{
  margin-top:2.4rem;
  display:flex; justify-content:center; gap:2rem;
  flex-wrap:wrap;
}
.socials a{
  font-size:.97rem;
  letter-spacing:.14em;
  text-decoration:none;
  color:var(--pencil);
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.socials a:hover{ color:var(--indigo); border-color:var(--ochre); }

/* ============================================================
   ФУТЪР
   ============================================================ */
footer{
  padding:1rem 1.5rem 2.8rem;
  text-align:center;
  font-size:1rem;
  color:var(--pencil);
}
footer .footer-copy{
  font-size:1.1rem;
  margin:0 0 1.4rem;
}
footer .footer-logo{
  display:block;
  width:min(200px, 60vw); height:auto;
  margin:1.4rem auto .9rem;
  opacity:.92;
}
/* подписът на изработката — най-тихият ред на страницата, на СОБСТВЕН ред,
   с машинописен шрифт (оригиналният Courier; Courier New е само резервата) */
.made-by{
  display:block;
  width:fit-content;
  margin:.9rem auto 0;
  font-family:Courier, 'Courier New', monospace;
  font-size:0.9rem;
  letter-spacing:.04em;
  color:var(--pencil);
  opacity:.65;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:opacity .3s ease, border-color .3s ease;
}
.made-by:hover{ opacity:1; border-bottom-color:var(--ochre); }

/* ============================================================
   МОБИЛНИ ЕКРАНИ
   ============================================================ */
@media (max-width: 820px){
  .gallery{ grid-template-columns:1fr; }
  .gallery .sheet{ grid-column:1 / -1 !important; margin-top:0 !important; transform:rotate(0deg) !important; }
  .gallery .sheet:nth-child(odd)  .paper-card{ transform:rotate(-.8deg); }
  .gallery .sheet:nth-child(even) .paper-card{ transform:rotate(.8deg); }
  .duo-grid{ grid-template-columns:1fr; }
  .duo-grid .side-sheet{ max-width:22rem; margin:0 auto; }

  /* --- мобилна навигация: нищо не се застъпва, копчето винаги се вижда --- */
  nav{
    flex-wrap:wrap;                 /* връзките слизат на втори ред */
    padding:.7rem 1rem .55rem;
    row-gap:.35rem;
  }
  .nav-logo{ font-size:1.45rem; order:1; }
  .nav-right{
    order:2;                        /* копчето остава горе вдясно, до логото */
    gap:0;
  }
  .nav-right .nav-links{ display:none; }          /* скриваме дублиращите се тук... */
  nav > .mobile-links{
    order:3;
    flex-basis:100%;                /* ...и ги показваме като собствен долен ред */
    display:flex;
    justify-content:center;
    gap:1.4rem;
    padding-top:.15rem;
  }
  nav > .mobile-links a{ font-size:.94rem; }
  .theme-toggle{ width:2.4rem; height:2.4rem; }   /* по-голяма цел за палец */
}
/* вторият ред връзки съществува само на телефон */
.mobile-links{ display:none; }

/* ============================================================
   СЛАЙДШОУ — творба на статив връз затъмненото ателие.
   Диалогът покрива целия екран (прозрачен): щракване извън листа
   е щракване по самия диалог = затваряне.
   ============================================================ */
/* докато стативът е отворен, страницата отдолу не скролира
   (чисто в CSS — никакво състояние в JavaScript) */
body:has(.slideshow[open]){ overflow:hidden; }

.slideshow{
  position:fixed; inset:0;
  width:100vw; height:100vh; max-width:none; max-height:none;
  margin:0; padding:0; border:0; outline:none;
  background:transparent;
  align-items:center; justify-content:center;
}
.slideshow[open]{ display:flex; }
.slideshow::backdrop{
  background:rgba(244,239,226,.9);      /* хартия в сянка, разредена */
  backdrop-filter:blur(7px);
}
[data-theme="night"] .slideshow::backdrop{
  background:rgba(13,12,22,.62);        /* нощта прозира — затъмнена и замъглена, не скрита */
}

/* Листът на статива: тесни полета — повечето творби са портретни и всеки
   милиметър паспарту се плаща с височина на картината. */
.slide-card{
  max-width:min(92vw, 860px);
  margin:0;
  padding:.8rem .8rem .6rem;      /* по средата между листовете в галерията и съвсем тесния кант */
}
.slide-art{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 7.5rem);
  width:auto; height:auto;
  margin:0 auto;
  opacity:0;
  transition:opacity .4s ease;
}
.slide-art.is-ready{ opacity:1; }
/* Надписът под картината — стегнат, но четим */
.slide-caption{ padding:.45rem .3rem 0; gap:0; }
.slide-caption h3{ font-size:1.25rem; line-height:1.25; }
.slide-caption small{ font-size:1.28rem; }
/* на статива листът е винаги напълно осветен — свещта е при него */
[data-theme="night"] .slide-card.paper-card::before{ background:#F7F2E6; }
[data-theme="night"] .slide-card.paper-card{
  box-shadow:0 24px 60px rgba(0,0,0,.75), 0 0 70px rgba(216,170,76,.16);
}

.slide-btn{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:var(--paper); color:var(--indigo);
  box-shadow:0 6px 16px rgba(43,53,72,.2);
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.slide-btn svg{ width:22px; height:22px; }
/* в края на реда стрелката я няма — авторският display:flex иначе бие
   атрибута hidden и копчето остава да стърчи */
.slide-btn[hidden]{ display:none; }
.slide-btn:hover{ transform:translateY(-50%) scale(1.08); box-shadow:0 9px 22px rgba(43,53,72,.28); }
.slide-prev{ left:clamp(.5rem, 3vw, 2.2rem); }
.slide-next{ right:clamp(.5rem, 3vw, 2.2rem); }
[data-theme="night"] .slide-btn{
  background:#1C1A2C; color:var(--indigo);
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}

/* Лентата горе-дясно: бройка · споделяне · затваряне */
.slide-tools{
  position:absolute;
  top:clamp(.5rem, 2.2vw, 1.1rem); right:clamp(.5rem, 2.2vw, 1.1rem);
  display:flex; align-items:center; gap:.5rem;
  z-index:2;
}
.slide-tools .slide-btn{
  position:static; transform:none;
  width:40px; height:40px;
}
.slide-tools .slide-btn:hover{ transform:scale(1.08); }
.slide-tools .slide-btn svg{ width:19px; height:19px; }
.slide-counter{
  font-family:var(--font-hand);
  font-size:1.45rem;
  color:var(--pencil);
  padding-right:.4rem;
  white-space:nowrap;
}
.slide-toast{
  position:absolute; top:calc(100% + .5rem); right:0;
  font-family:var(--font-body);
  font-size:.94rem;
  color:var(--indigo);
  background:var(--paper);
  border-radius:var(--r, 6px);
  padding:.3rem .6rem;
  box-shadow:0 6px 16px rgba(43,53,72,.2);
  white-space:nowrap;
}
.slide-toast:empty{ display:none; }
[data-theme="night"] .slide-toast{ background:#1C1A2C; box-shadow:0 6px 18px rgba(0,0,0,.55); }

@media (max-width: 820px){
  .slide-card{ max-width:92vw; }
  .slide-art{ max-height:calc(100vh - 12rem); }
  .slide-btn{ width:44px; height:44px; }
  .slide-btn svg{ width:19px; height:19px; }
  .slide-tools .slide-btn{ width:38px; height:38px; }
  /* На тесен екран стрелките не лежат върху творбата, а слизат под нея —
     мястото отстрани е на самата картина (пък и там се плъзга с пръст). */
  .slide-prev, .slide-next{
    top:auto; bottom:1.2rem;
    transform:none;
  }
  .slide-prev{ left:50%; margin-left:-3.6rem; }
  .slide-next{ right:50%; margin-right:-3.6rem; }
  .slide-prev:hover, .slide-next:hover{ transform:scale(1.08); }
}

/* ============================================================
   БЕЗ ИЗЛИШНО ДВИЖЕНИЕ, ако потребителят го е поискал
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .bloom, .drip::after{ animation:none !important; }
  .mist{ animation:none; }
  .hero-eyebrow, .hero h1, .hero-tagline, .hero-cat{ animation:none; opacity:1; }
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
  .slide-art{ transition:none; opacity:1; }
}