/* About page — ported from the Say Notary "About" design and scoped to this page
   so it coexists with style.css (shared header/footer). */
.about-page{--ab-paper:#F3ECE4;--ab-ink:#241319;--ab-rose:#FF4F93;--ab-violet:#B14CFF;--ab-dim:#7a6b70;--ab-line:#e0d1d7;background:var(--ab-paper)}
.about-main{font-family:'Manrope',system-ui,sans-serif;color:var(--ab-ink);line-height:1.5}
.about-main .serif{font-family:'Instrument Serif',serif}
.about-main .sc{font-family:'Space Grotesk',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;font-weight:600;color:var(--ab-dim)}
.about-main .script{font-family:'Sacramento',cursive;color:var(--ab-violet)}
.about-main canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.ab-hero,.historia,.cierre{position:relative;overflow:hidden;background:var(--ab-paper)}
.ab-hero::after,.historia::after,.cierre::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");opacity:.04;pointer-events:none;mix-blend-mode:multiply;z-index:6}
.about-page .myrah-menu-links>a[aria-current="page"]{color:#fff}

/* ===== HERO ===== */
.ab-hero{min-height:100svh}
.ab-wrap{max-width:1200px;margin:0 auto;padding:0 3rem;position:relative;z-index:2}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:170px 0 0}
.ab-brand{font-family:'Instrument Serif',serif;font-size:1.6rem;line-height:1}
.ab-brand small{display:block;font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:.2em;font-size:.58rem;text-transform:uppercase;color:var(--ab-dim);margin-top:.3rem}
.issue{font-family:'Space Grotesk',system-ui,sans-serif;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ab-dim);text-align:right;line-height:1.8;white-space:nowrap}
.rule{height:1px;background:var(--ab-line);margin:1.4vh 0 0}
.ghost{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:'Instrument Serif',serif;font-style:italic;font-size:52vh;line-height:.8;color:rgba(177,76,255,.06);z-index:1;white-space:nowrap;pointer-events:none}
.stage{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-start;padding:7vh 0 5vh}
.figblock{position:relative;width:min(400px,78vw)}
.arch{position:absolute;top:-4%;left:-9%;width:118%;height:108%;z-index:0;border-radius:230px 230px 22px 22px;background:linear-gradient(135deg,#F9C7DD 0%,#F2B6D6 22%,#D9B6F2 46%,#C9A9F0 62%,#F7D3BE 82%,#F9C7DD 100%);background-size:260% 260%;animation:archflow 18s ease-in-out infinite}
@keyframes archflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.arch::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:220% 220%;animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%{background-position:120% 0}55%{background-position:-40% 0}100%{background-position:-40% 0}}
.fig{position:relative;z-index:1;width:100%;height:min(64vh,540px);object-fit:cover;object-position:center top;border-radius:210px 210px 16px 16px;box-shadow:0 40px 90px -40px rgba(60,20,40,.5)}
.hola{position:absolute;z-index:3;left:-32%;top:-11%;font-family:'Instrument Serif',serif;font-size:clamp(3.8rem,11vw,9.5rem);line-height:.82}
.soy{position:absolute;z-index:3;left:-50%;right:-24%;bottom:4%;text-align:left;white-space:nowrap;font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(3.8rem,10vw,8.6rem);line-height:.82;letter-spacing:0}
.soy em{font-style:italic;color:var(--ab-rose)}
.note{position:absolute;z-index:4;left:-42%;bottom:22%;text-align:left;max-width:150px}
.note .script{font-size:1.9rem;display:block;line-height:1}
.note svg{width:60px;height:40px;overflow:visible;margin-top:.2rem}
.note .arrow{stroke:var(--ab-violet);fill:none;stroke-width:2;stroke-linecap:round}
.edge{position:absolute;right:10px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;white-space:nowrap;font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:.32em;font-size:.64rem;text-transform:uppercase;color:var(--ab-dim);z-index:4}
@media(max-width:860px){
  .ab-wrap{padding:0 1.4rem}
  .topbar{flex-direction:column;gap:.5rem;padding-top:135px}
  .issue{text-align:left}
  .ghost{font-size:30vh;top:44%}
  .stage{padding:6vh 0 4vh}
  .figblock{width:74vw;max-width:340px}
  .fig{height:min(58vh,460px)}
  .hola{left:0;right:0;top:-8%;text-align:center;font-size:clamp(3.4rem,17vw,5.4rem)}
  .soy{left:0;right:0;bottom:3%;text-align:center;font-size:clamp(3.4rem,17vw,5.4rem);color:var(--ab-paper);text-shadow:0 2px 18px rgba(36,19,25,.35)}
  .note,.edge{display:none}
}
@media(max-width:400px){.hola,.soy{font-size:3.2rem}.figblock{width:82vw}}

/* ===== MY STORY (editorial layout: small floated photo, text wraps around it) ===== */
.historia{margin-top:clamp(3rem,8vh,6rem);padding:clamp(5rem,10vh,8rem) 0 clamp(6rem,14vh,10rem)}
.hwrap{max-width:min(700px,92vw);margin:0 auto;padding:0 3rem;position:relative;z-index:2}
.hgrid{display:block}
.hgrid::after{content:"";display:block;clear:both}
.hphoto{float:right;width:min(190px,26%);margin:.5rem 0 1.2rem 2rem;position:relative;shape-outside:inset(0 round 8px)}
.hphoto img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 15%;border-radius:8px;box-shadow:0 16px 40px -22px rgba(60,20,40,.42);display:block}
.hcap{display:block;margin-top:.5rem;font-family:'Space Grotesk',system-ui,sans-serif;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(42,15,28,.42);line-height:1.5}
.htxt{font-size:1.02rem}
.about-main .htxt .sc{display:block;margin-bottom:.7rem}
.about-main .htxt h1{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.08;margin:0 0 2.4rem}
.about-main .htxt h1 em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--ab-rose);font-weight:400;font-size:1.12em}
@media(min-width:861px){.about-main .htxt h1 em{display:block;white-space:nowrap}}
.htxt p{color:var(--ab-dim);line-height:1.7;margin:0 0 .9rem;font-size:1rem}
.htxt p:first-of-type::first-letter{float:left;font-family:'Instrument Serif',serif;font-size:4.4rem;line-height:.82;padding:.12em .12em 0 0;color:var(--ab-rose)}
.htxt .born{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:1.2rem;color:var(--ab-ink);margin:1.1rem 0}
.htxt .born em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--ab-rose);font-weight:400}
.htxt .endline{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.45;color:var(--ab-ink);margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--ab-line)}
.htxt .endline em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--ab-rose);font-size:1.35em}
@media(max-width:860px){
  .historia{margin-top:2.5rem;padding:4rem 0}
  .hwrap{padding:0 1.4rem}
  .hphoto{width:min(140px,38%);margin:.3rem 0 1rem 1.2rem;shape-outside:none}
  .hphoto img{object-position:center 12%}
  .hcap{font-size:.55rem}
  .about-main .htxt h1{font-size:1.75rem;margin-bottom:1.7rem}
  .htxt p{font-size:.98rem}
  .htxt p:first-of-type::first-letter{font-size:3.4rem}
  .htxt .born{font-size:1.15rem}
  .htxt .endline{font-size:1.05rem}
}

/* ===== CLOSING LETTER ===== */
.cierre{margin-top:clamp(2rem,5vh,4rem);padding:clamp(6rem,14vh,10rem) 0;display:flex;align-items:center}
.cwrap{max-width:640px;width:100%;margin:0 auto;padding:0 3rem;position:relative;z-index:2;text-align:center}
.letter{text-align:left}
.letter p{font-family:'Instrument Serif',serif;font-size:clamp(1.06rem,1.6vw,1.32rem);line-height:1.75;color:var(--ab-ink);margin:0 auto 1.15rem;max-width:23em;text-wrap:pretty}
.letter p em{font-style:italic;color:var(--ab-rose)}
.sign{font-family:'Herr Von Muellerhoff',cursive;font-size:clamp(3rem,7vw,4.6rem);color:var(--ab-ink);line-height:1;margin:2rem 0 0;text-align:center}
.signrole{font-family:'Space Grotesk',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;color:var(--ab-dim);margin-top:.4rem;text-align:center}
.cbtn{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.6rem;background:var(--ab-rose);color:#fff;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:.02em;padding:1rem 1.9rem;border-radius:999px;border:0;box-shadow:0 18px 40px -14px rgba(255,79,147,.55);transition:transform .3s,box-shadow .3s;text-decoration:none}
.cbtn:hover{transform:translateY(-3px);box-shadow:0 24px 50px -14px rgba(255,79,147,.72)}
.cbtn .wa{width:22px;height:22px;fill:#fff;flex:0 0 auto}
.cbtn:hover .wa{animation:cbtnShake .5s}
@keyframes cbtnShake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-6deg)}40%{transform:translateX(4px) rotate(6deg)}60%{transform:translateX(-4px) rotate(-6deg)}80%{transform:translateX(4px) rotate(6deg)}}
@media(max-width:860px){.cierre{margin-top:2rem;padding:5rem 0}.cwrap{padding:0 1.6rem}}
@media(max-width:560px){.letter p{font-size:1.02rem;line-height:1.7}.cwrap{padding:0 1.4rem}.cbtn{font-size:.94rem;padding:.9rem 1.5rem}}

/* ===== SCROLL REVEAL (only when JS is running) ===== */
.js .reveal{opacity:0;transform:translateY(48px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.14s}.reveal.d2{transition-delay:.28s}.reveal.d3{transition-delay:.42s}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.arch,.arch::before{animation:none}}

/* The shared footer sits on this page's warmer paper. */
.about-page .footer{position:relative;z-index:2}