/* About Holística Arts · first selected concept. Built onto the existing homepage. */
.about-section{
  --about-ink:#370755;
  position:relative;isolation:isolate;background:#fffcfa;
  padding:84px 26px 58px;overflow:hidden;color:var(--about-ink);
  border-top:1px solid #f7e6cf;
}
.about-section::before{
  content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(ellipse 48% 38% at -8% 7%,#fde3ec,transparent 90%),
    radial-gradient(ellipse 34% 32% at 108% 8%,#f1e5fc,transparent 90%),
    radial-gradient(ellipse 33% 34% at -4% 105%,#c9eef4,transparent 95%),
    radial-gradient(ellipse 34% 35% at 104% 103%,#e8ddf7,transparent 95%),
    #fffcfa;
}
.about-decor{position:absolute;user-select:none;pointer-events:none;z-index:-1;object-fit:contain}
/* Strong watercolor pigment at section edges; still independent of floral elements. */
/* Cropped by a soft vertical mask to keep watercolor around the perimeter. */
.about-wash-corners{inset:0;width:100%;height:100%;object-fit:fill;transform:scaleY(-1);opacity:.66;z-index:-2;mask-image:linear-gradient(to bottom,#000 0%,#000 9%,transparent 25%,transparent 83%,#000 99%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 9%,transparent 25%,transparent 83%,#000 99%)}
.about-wash-header{width:100%;height:135px;top:0;left:0;object-fit:fill;opacity:.30;z-index:-2;mask-image:linear-gradient(to bottom,#000,transparent 92%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.about-cloud-left{width:min(36vw,640px);left:-145px;top:-83px;opacity:.25;mask-image:radial-gradient(ellipse 68% 65% at 29% 30%,#000,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 68% 65% at 29% 30%,#000,transparent 100%)}
.about-cloud-right{width:min(35vw,580px);right:-128px;top:-75px;transform:scaleX(-1);opacity:.23;mask-image:radial-gradient(ellipse 68% 65% at 29% 30%,#000,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 68% 65% at 29% 30%,#000,transparent 100%)}
.about-gold-top{position:absolute;pointer-events:none;top:14px;width:100%;left:0;height:90px;z-index:0;opacity:1}
.about-botanical-corner-left{left:-42px;bottom:-7px;width:min(24vw,350px);transform:rotate(-7deg);opacity:1;z-index:0}
.about-botanical-corner-right{right:-46px;bottom:-7px;width:min(24vw,350px);transform:rotate(7deg);opacity:1;z-index:0}
.about-gold-bottom{position:absolute;bottom:-7px;left:0;width:100%;height:115px;pointer-events:none;opacity:1;z-index:0}
.about-container{max-width:1390px;margin:0 auto;position:relative;z-index:1}
.about-lead{display:grid;grid-template-columns:minmax(340px,1.08fr) minmax(395px,1.12fr) minmax(215px,.56fr);gap:41px;align-items:center}
.about-photo-frame{position:relative;isolation:isolate;max-width:475px;justify-self:center;min-width:0;align-self:center;margin:0;padding:6px 6px 7px;background:linear-gradient(135deg,#ffffffed,#fffbf9ed);border:1.5px solid #edbd66;border-radius:16px;box-shadow:0 16px 32px #4a1b421c,0 1px 0 #fff inset;transform:rotate(-.1deg);transition:transform .5s,box-shadow .4s}
/* The reference photo is framed by painted pigment rather than floating on blank white. */
.about-photo-frame::before,.about-photo-frame::after{content:"";position:absolute;pointer-events:none;z-index:-1;background:url("assets/about/watercolor-splash-pink-purple.png") center / contain no-repeat;filter:saturate(.9)}
.about-photo-frame::before{top:-50px;left:-82px;width:260px;height:240px;transform:rotate(-14deg);opacity:.29}
.about-photo-frame::after{bottom:-65px;left:-90px;width:285px;height:235px;transform:rotate(15deg);filter:hue-rotate(120deg) saturate(.9);opacity:.25}
.about-photo-frame:hover{transform:translateY(-3px) rotate(0deg);box-shadow:0 18px 34px #4a1b4229,0 1px 0 #fff inset}
.about-welcome{font-size:12px;font-weight:800;line-height:1.53;text-align:center;color:#491162;padding:6px 9px 9px;margin:0;letter-spacing:-.015em}
.about-photo-frame>img{width:100%;display:block;aspect-ratio:1.27;object-fit:cover;object-position:center;border-radius:2px 2px 9px 9px}
.about-copy{min-width:0;padding-bottom:5px}
.about-eyebrow{font-size:13px;letter-spacing:.18em;font-weight:800;text-transform:uppercase;margin:14px 0 15px}
.about-heading{font:800 clamp(33px,2.9vw,46px)/1.02 Impact,"Roboto Condensed","Noto Sans Condensed","Arial Narrow",sans-serif;letter-spacing:-.016em;color:#380554;margin:0;max-width:none;white-space:nowrap}
.about-heading strong{font-weight:800;color:#ea126c}
.about-heading-heart{display:inline-block;vertical-align:middle;margin-left:2px;width:38px;height:38px}
.about-heading-heart img{width:100%;height:100%;object-fit:contain}
.about-gold-underline{display:block;width:182px;height:18px;margin:8px 0 18px;object-fit:fill}
.about-copy p{font-size:18px;line-height:1.52;letter-spacing:-.015em;margin:0 0 14px;max-width:560px}
.about-copy strong{font-weight:800}
.about-pink{color:#ec146e}.about-gold{color:#d08b09}.about-purple{color:#7d209b}
.about-actions{display:flex;flex-direction:column;gap:12px;margin-top:18px;align-items:flex-start}
.about-action{display:inline-flex;gap:13px;align-items:center;flex-wrap:wrap;color:#360650;font-size:15px;font-weight:800;transition:transform .2s,color .2s;background:none;border:0;padding:3px 4px 3px 0}
.about-action:hover{transform:translateX(4px);color:#e1106a}
.about-action .about-placeholder{border:1px dashed #8a2d98;padding:3px 10px;border-radius:999px;color:#5b286e;font-size:13px;line-height:1.1;font-weight:700}
.about-action svg{width:17px;height:17px}
.about-symbol{position:relative;display:grid;place-items:center;align-self:stretch}
.about-symbol::before{content:"";position:absolute;inset:11% -16% 8%;z-index:-2;background:radial-gradient(ellipse,#dd8cca77,transparent 74%)}
.about-symbol>img:not(.about-spark){width:100%;max-width:350px;height:auto;object-fit:contain;filter:drop-shadow(0 7px 5px #e9bce61c);transition:transform .6s}
.about-symbol:hover>img:not(.about-spark){transform:rotate(4deg) scale(1.02)}
.about-symbol>img.about-spark{position:absolute;bottom:5%;right:-17%;width:117%;height:66%;opacity:.77;z-index:-1;object-fit:contain;pointer-events:none;filter:saturate(1.25)}
.about-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:22px;margin-bottom:25px}
.about-link-card{min-height:170px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:10px 14px 10px;border:1px solid transparent;border-radius:13px;background:transparent;color:inherit;font:inherit;appearance:none;transition:background .28s,transform .28s,border-color .28s,box-shadow .28s}
.about-link-card+.about-link-card::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent 0%,#dfa940 20%,#dfa940 85%,transparent 100%)}
.about-link-card:hover,.about-link-card:focus-visible{background:#fff;transform:translateY(-4px);border-color:#f3d3cb;box-shadow:0 11px 26px #651c5920}
/* Delicate painted swatches: the same separated watercolor assets used in the calendar. */
.about-link-card::after{content:"";position:absolute;top:-10px;left:50%;width:min(88%,112px);height:84px;pointer-events:none;z-index:0;opacity:.14;transform:translateX(-50%) rotate(-3deg);background:var(--about-swatch,url("assets/calendar/day-pink.png")) center/100% 100% no-repeat;mask-image:radial-gradient(ellipse 78% 51% at 50% 53%,#000 25%,transparent 95%);-webkit-mask-image:radial-gradient(ellipse 78% 51% at 50% 53%,#000 25%,transparent 95%);transition:opacity .24s,transform .3s}
.about-link-card:nth-child(1){--about-swatch:url("assets/calendar/day-rose.png")}
.about-link-card:nth-child(2){--about-swatch:url("assets/calendar/day-coral.png")}
.about-link-card:nth-child(3){--about-swatch:url("assets/calendar/day-purple.png")}
.about-link-card:nth-child(4){--about-swatch:url("assets/calendar/day-teal.png")}
.about-link-card:nth-child(5){--about-swatch:url("assets/calendar/day-pink.png")}
.about-link-card:nth-child(6){--about-swatch:url("assets/calendar/day-rose.png")}
.about-link-card:hover::after{opacity:.27;transform:translateX(-50%) rotate(1deg) scale(1.05)}
.about-link-card>img,.about-link-card>strong,.about-link-card>span{position:relative;z-index:1}
.about-link-card:hover::before{opacity:0}
.about-link-card img{width:58px;height:58px;margin:0 auto 8px;object-fit:contain}
.about-link-card strong{font-size:14px;letter-spacing:.01em;color:#310448;font-weight:850;line-height:1.2;text-transform:uppercase}
.about-link-card .about-tiny-rule{display:block;width:55px;height:3px;background:linear-gradient(90deg,transparent,var(--card-color,#df971d) 18%,var(--card-color,#df971d) 82%,transparent);border-radius:3px;margin:10px 0 9px}
.about-link-card .about-link-description{color:#76647b;font-size:13px;line-height:1.35;max-width:155px}
.about-link-card .about-link-preview{color:#6a347c;font-size:12px;font-weight:800;margin-top:10px}
.about-donate-row{text-align:center;position:relative;z-index:2}
.about-donate-button{position:relative;min-height:48px;border-radius:999px;border:0;background:linear-gradient(115deg,#f21b7c,#dc075e);color:#fff;overflow:hidden;isolation:isolate;font-size:17px;font-weight:750;padding:12px 38px;box-shadow:0 9px 16px #a2085935;display:inline-flex;align-items:center;gap:13px;transition:transform .2s,box-shadow .2s}
/* A translucent brush grain, without the harsh corners of the swatch itself. */
.about-donate-button::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:url("assets/calendar/day-rose.png") center/100% 100% no-repeat;opacity:.14;mix-blend-mode:screen}
.about-donate-button:hover{transform:translateY(-3px);box-shadow:0 12px 24px #a2085950}
.about-donate-button svg{width:22px;height:22px}
@media(max-width:1280px){
 .about-lead{grid-template-columns:minmax(280px,1fr) minmax(340px,1.09fr);gap:38px}
 .about-symbol{position:absolute;right:-40px;top:46px;width:200px;opacity:.22;z-index:-1}
 .about-copy{padding-right:40px}
 .about-links{margin-top:40px}
 .about-link-card{padding-inline:9px}
}
@media(max-width:850px){
 .about-section{padding:54px 23px 48px}
 .about-lead{grid-template-columns:1fr 1fr;gap:25px}
 .about-copy{padding-right:0}
 .about-copy p{font-size:15px}
 .about-heading{font-size:clamp(30px,4.2vw,40px);white-space:normal}
 .about-welcome{font-size:10px}
 .about-photo-frame>img{aspect-ratio:1.27}
 .about-links{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px;margin-top:38px}
 .about-link-card:nth-child(4)::before{display:none}
 .about-link-card{min-height:172px}
 .about-botanical-corner-left,.about-botanical-corner-right{width:230px}
}
@media(max-width:620px){
 .about-section{padding:48px 17px 64px}
 .about-lead{grid-template-columns:minmax(0,1fr);gap:25px}
 .about-copy{order:1;text-align:left;padding:0 8px}
 .about-photo-frame{order:2;width:min(100%,440px);margin:0 auto}
 .about-symbol{top:88px;right:-48px;width:185px;opacity:.17}
 .about-eyebrow{font-size:11px;margin:13px 0 11px}
 .about-heading{font-size:clamp(23px,7.3vw,29px);max-width:370px;white-space:normal}
 .about-heading-heart{width:28px;height:28px}
 .about-copy p{font-size:15px}
 .about-actions{gap:9px}
 .about-link-card{min-height:157px;padding:9px 5px}
 .about-link-card img{width:46px;height:46px}
 .about-link-card strong{font-size:11px}
 .about-link-card .about-link-description{font-size:11px}
 .about-link-card .about-link-preview{font-size:10px}
 .about-links{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px;gap:0 1px}
 .about-link-card:nth-child(odd)::before{display:none}
 .about-link-card:nth-child(4)::before{display:block}
 .about-botanical-corner-left,.about-botanical-corner-right{width:190px;bottom:-26px}
 .about-donate-button{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.about-section *{transition:none!important}}

/* Constrain pigment to section edges without hiding the content at smaller widths. */
@media(min-width:621px) and (max-width:1280px){.about-wash-corners{opacity:.58}.about-cloud-left,.about-cloud-right{opacity:.42}.about-heading{white-space:normal;font-size:clamp(33px,3.4vw,43px)}.about-gold-top{top:8px}}
@media(max-width:850px){.about-wash-corners{opacity:.55}.about-wash-header{height:130px;opacity:.32}.about-botanical-corner-left,.about-botanical-corner-right{opacity:.87}.about-symbol>img.about-spark{opacity:.54}}
@media(max-width:620px){.about-wash-corners{opacity:.49}.about-cloud-left,.about-cloud-right{opacity:.23}.about-gold-top{top:-7px;height:66px}.about-gold-bottom{height:78px}.about-link-card::after{opacity:.18}.about-photo-frame::before{left:-23px;width:calc(100% + 46px)}.about-photo-frame::after{left:-24px;width:calc(100% + 49px)}.about-symbol{opacity:.10}}
