/* ============================================================
   Дзен будистки орден в България — дизайн система
   Мастило върху оризова хартия: топъл, спокоен, съзерцателен
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=PT+Sans:wght@400;700&display=swap');

:root{
  --ink:        #211f1c;
  --ink-soft:   #3a352f;
  --paper:      #e4ded0;
  --paper-2:    #d9d2c0;
  --vermillion: #a3392b;
  --vermillion-deep: #7c2a20;
  --gold:       #b08a4e;
  --moss:       #5b6a4f;
  --line:       rgba(33,31,28,0.14);
  --line-on-ink:rgba(228,222,208,0.16);

  --display: 'Yeseva One', 'PT Serif', serif;
  --body:    'PT Serif', Georgia, serif;
  --ui:      'PT Sans', Arial, sans-serif;

  --maxw: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--ui);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--vermillion);
  font-weight:700;
  margin:0 0 14px;
}
.on-ink .eyebrow{ color:var(--gold); }

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink);
}
.on-ink h1, .on-ink h2, .on-ink h3{ color:var(--paper); }

h1{ font-size:clamp(2.4rem,5vw,3.6rem); }
h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); }
h3{ font-size:1.35rem; }

p{ margin:0 0 1.1em; }
.lede{ font-size:1.2rem; color:var(--ink-soft); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(228,222,208,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  font-family:var(--display);
  font-size:1.15rem;
  color:var(--ink);
  line-height:1.2;
}
.brand img{ width:40px; height:40px; object-fit:contain; }
.brand small{
  display:block; font-family:var(--ui); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--vermillion);
  font-weight:700; margin-top:2px;
}

nav.main-nav{ display:flex; align-items:center; gap:28px; }
nav.main-nav a{
  font-family:var(--ui); font-size:14px; text-decoration:none;
  color:var(--ink-soft); position:relative; padding:4px 0;
}
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--vermillion); }
nav.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--vermillion);
}

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--ink); display:block; }

@media (max-width:820px){
  nav.main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:10px 28px 28px; transform:translateY(-110%);
    transition:transform .35s ease; border-top:1px solid var(--line);
  }
  nav.main-nav.open{ transform:translateY(0); }
  nav.main-nav a{ width:100%; padding:14px 0; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:flex; }
}

/* ---------- hero with ensō signature ---------- */
.hero{
  position:relative;
  padding:96px 0 84px;
  overflow:hidden;
  background:var(--paper);
}
.hero .enso{
  position:absolute; right:-120px; top:50%; transform:translateY(-50%);
  width:560px; height:560px; opacity:.5; pointer-events:none;
}
.hero .enso path{
  fill:none; stroke:var(--vermillion); stroke-width:14;
  stroke-linecap:round;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:draw 2.4s cubic-bezier(.5,0,.15,1) .2s forwards;
}
@media (prefers-reduced-motion:reduce){
  .hero .enso path{ animation:none; stroke-dashoffset:0; }
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

.hero-inner{ position:relative; z-index:2; max-width:640px; }
.hero h1{ margin-bottom:.3em; }

@media (max-width:820px){
  .hero .enso{ width:340px; height:340px; right:-140px; opacity:.35; }
}

/* ---------- ink (dark) section ---------- */
.section{ padding:88px 0; }
.section.on-ink{
  background:var(--ink); color:var(--paper);
}
.on-ink p{ color:var(--paper); }
.on-ink .lede{ color:rgba(228,222,208,.78); }
.on-ink .small{ color:rgba(228,222,208,.65); }
.section + .section{ border-top:1px solid var(--line); }
.section.on-ink + .section.on-ink{ border-top:1px solid var(--line-on-ink); }

.grid-2{
  display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center;
}
@media (max-width:820px){ .grid-2{ grid-template-columns:1fr; gap:36px; } }

.grid-2 img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/5;
}

.frame{
  border:1px solid var(--line);
  padding:8px;
}
.on-ink .frame{ border-color:var(--line-on-ink); }

/* ---------- cards ---------- */
.card-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:820px){ .card-grid{ grid-template-columns:1fr; } }
.card{
  background:var(--paper); padding:36px 32px;
}
.card .mark{
  font-family:var(--display); font-size:2rem; color:var(--vermillion);
  display:block; margin-bottom:14px;
}
.card h3{ margin-bottom:.4em; }
.card p{ color:var(--ink-soft); margin-bottom:0; font-size:.98rem; }

/* ---------- faq ---------- */
.faq-item{
  border-bottom:1px solid var(--line);
  padding:26px 0;
}
.faq-item summary{
  font-family:var(--display); font-size:1.2rem; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; gap:20px;
  align-items:baseline;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--ui); color:var(--vermillion); font-size:1.4rem;
  flex:0 0 auto;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item .a{ margin-top:14px; color:var(--ink-soft); max-width:64ch; }

/* ---------- quote / pull ---------- */
.pull{
  font-family:var(--display); font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.4; color:var(--ink); max-width:22ch; margin:0 auto;
  text-align:center; position:relative; padding:0 20px;
}
.pull::before, .pull::after{ content:"\201C"; color:var(--gold); }
.pull::after{ content:"\201D"; }
.on-ink .pull{ color:var(--paper); }

/* ---------- contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:56px;
}
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-item{ margin-bottom:26px; }
.contact-item .eyebrow{ margin-bottom:6px; }
.contact-item a{
  font-family:var(--display); font-size:1.5rem; text-decoration:none;
  color:var(--vermillion); border-bottom:1px solid transparent;
}
.contact-item a:hover{ border-color:var(--vermillion); }

.map-frame{
  border:1px solid var(--line); aspect-ratio:4/3; overflow:hidden;
}
.map-frame iframe{ width:100%; height:100%; border:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ui); font-size:14px; font-weight:700;
  letter-spacing:.04em; text-decoration:none;
  padding:14px 26px; border:1px solid var(--ink);
  color:var(--ink); transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.primary{
  background:var(--vermillion); border-color:var(--vermillion); color:var(--paper);
}
.btn.primary:hover{ background:var(--vermillion-deep); border-color:var(--vermillion-deep); }
.on-ink .btn{ border-color:var(--paper); color:var(--paper); }
.on-ink .btn:hover{ background:var(--paper); color:var(--ink); }

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink); color:var(--paper); padding:56px 0 32px;
}
.site-footer .wrap{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px;
}
.site-footer .brand{ color:var(--paper); }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h4{
  font-family:var(--ui); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin:0 0 14px;
}
.footer-col a{
  display:block; font-family:var(--ui); font-size:14px; color:var(--paper);
  text-decoration:none; opacity:.85; margin-bottom:9px;
}
.footer-col a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{
  max-width:var(--maxw); margin:40px auto 0; padding:20px 28px 0;
  border-top:1px solid var(--line-on-ink);
  font-family:var(--ui); font-size:12px; color:rgba(228,222,208,.55);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ---------- page header (inner pages) ---------- */
.page-header{
  padding:64px 0 48px; text-align:center; position:relative;
}
.page-header .enso-bg{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:420px; height:420px; opacity:.08; z-index:0;
}
.page-header .enso-bg path{ fill:none; stroke:var(--ink); stroke-width:10; }
.page-header .wrap{ position:relative; z-index:1; }
.page-header .lede{ max-width:60ch; margin:0 auto; }

/* utility */
.center{ text-align:center; }
.mt0{ margin-top:0; }
.small{ font-size:.9rem; color:var(--ink-soft); }