/* ============================================================
   Bella, So Fancy — page section layouts
   ============================================================ */

:root{ --gold-deep:#B8923F; }

/* ---------- shared section heads ---------- */
.sec-head{max-width:640px;margin-bottom:2.8rem}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .kicker{justify-content:center}
.sec-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;max-width:none;margin-bottom:2.2rem}
@media (max-width:640px){.sec-head--row{flex-direction:column;align-items:flex-start}}

.link-arrow{display:inline-flex;align-items:center;gap:.4em;color:var(--coral-deep);font-weight:600;font-size:.95rem;margin-top:1.1rem}
.link-arrow svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
a:hover .link-arrow svg{transform:translateX(4px)}

/* ============================================================
   HOME — hero
   ============================================================ */
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__role{font-family:var(--font-body);font-weight:500;font-size:clamp(1.05rem,1.9vw,1.4rem);color:var(--muted);margin-top:1.2rem;letter-spacing:.01em}
.rot{color:var(--coral-deep);font-weight:600;display:inline-block;min-width:5ch}
.hero__art{position:relative;aspect-ratio:1/1;max-width:520px;margin-inline:auto;width:100%}
.hero__art-puff{position:absolute;inset:-8%;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 52% 46%,var(--coral-soft),rgba(252,228,220,.45) 58%,transparent 74%);filter:blur(8px)}
.hero__portrait{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 30px 48px rgba(124,78,58,.24))}
.float-card{position:absolute;z-index:2;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:.72rem .95rem;display:flex;align-items:center;gap:.65rem;border:1px solid rgba(244,168,142,.22)}
.float-card strong{display:block;font-family:var(--font-display);font-size:1.02rem;line-height:1.1;color:var(--ink)}
.float-card span{display:block;font-size:.76rem;color:var(--muted)}
.float-card--a{top:6%;left:-3%;animation:floaty 5s ease-in-out infinite}
.float-card--b{bottom:9%;right:-3%;animation:floaty 6s ease-in-out infinite .7s}
.float-ic{width:38px;height:38px;border-radius:11px;background:var(--coral-soft);color:var(--coral-deep);display:flex;align-items:center;justify-content:center;flex:none;line-height:0}
.float-ic svg{width:20px;height:20px}
.float-ic--gold{background:rgba(212,175,106,.22);color:var(--gold-deep)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
body.anim-off .float-card{animation:none}
@media (prefers-reduced-motion:reduce){.float-card{animation:none}}
@media (max-width:880px){
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero .kicker{justify-content:center}
  .hero .btn-row{justify-content:center}
  .hero__art{order:-1;max-width:380px}
}
@media (max-width:420px){.float-card span{display:none}.float-card strong{font-size:.92rem}}

/* intro strip */
.intro-strip__text{font-family:var(--font-display);font-weight:500;font-size:clamp(1.5rem,3.3vw,2.35rem);line-height:1.38;letter-spacing:-.015em;color:var(--ink);max-width:780px;margin:1.2rem auto 0;text-wrap:pretty}
.glance{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* highlights */
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media (max-width:880px){.highlights{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.highlight{display:flex;flex-direction:column}
.highlight__img{aspect-ratio:4/3;overflow:hidden}
.highlight__img .photo-ph{transition:transform .6s var(--ease)}
.highlight:hover .highlight__img .photo-ph{transform:scale(1.06)}
.highlight__body{padding:1.5rem 1.6rem 1.7rem}
.highlight__body h3{font-size:1.5rem}
.highlight__body p{margin-top:.5rem}

/* featured video */
.fv-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (max-width:880px){.fv-grid{grid-template-columns:1fr}}
.fv-player{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.play-btn{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--coral-deep);box-shadow:0 12px 30px -8px rgba(46,42,40,.45);transition:transform .3s var(--ease)}
.play-btn svg{width:34px;height:34px;margin-left:5px}
.fv-player:hover .play-btn{transform:scale(1.09)}
.fv-badge{position:absolute;top:14px;left:14px;background:rgba(46,42,40,.58);color:#fff;font-size:.78rem;font-weight:600;padding:.42em .85em;border-radius:999px;letter-spacing:.02em;backdrop-filter:blur(4px)}

/* teaser strip */
.teaser-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.teaser{aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.teaser .photo-ph{transition:transform .6s var(--ease)}
.teaser:hover .photo-ph{transform:scale(1.07)}
.teaser--wide{grid-column:span 2;aspect-ratio:auto}
@media (max-width:760px){.teaser-strip{grid-template-columns:repeat(2,1fr)}.teaser--wide{grid-column:span 2}}

/* cta banner */
.cta-banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(120deg,var(--coral-deep),var(--coral));padding:clamp(2.6rem,5vw,4.5rem)}
.cta-banner__deco{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 86% 18%,rgba(255,255,255,.28),transparent 38%),radial-gradient(circle at 8% 92%,rgba(212,175,106,.4),transparent 44%)}
.cta-banner__inner{position:relative;z-index:1}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:880px){.about-grid{grid-template-columns:1fr}.about-portrait{max-width:380px;margin-inline:auto}}
.about-portrait{position:relative;aspect-ratio:1/1}
.about-portrait .hero__art-puff{inset:-4%}
.about-portrait img{position:relative;z-index:1;width:100%;filter:drop-shadow(0 26px 44px rgba(124,78,58,.22))}
.story p{margin-bottom:1.1rem;color:var(--muted);font-size:1.06rem}
.story p strong{color:var(--ink)}

.timeline{margin-top:1rem}
.timeline__item{position:relative;padding-left:2.3rem;padding-bottom:2.1rem}
.timeline__item::before{content:"";position:absolute;left:7px;top:7px;bottom:-7px;width:2px;background:var(--coral-soft)}
.timeline__item:last-child{padding-bottom:0}
.timeline__item:last-child::before{display:none}
.timeline__dot{position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--coral-deep);box-shadow:0 0 0 4px var(--coral-soft)}
.timeline__year{font-family:var(--font-body);font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.timeline__title{font-family:var(--font-display);font-size:1.28rem;margin-top:.2rem}
.timeline__body{color:var(--muted);margin-top:.35rem}

.interests{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:720px){.interests{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.interests{grid-template-columns:1fr}}
.interest{background:#fff;border:1px solid var(--coral-soft);border-radius:var(--radius);padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.interest:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.interest__ic{width:46px;height:46px;border-radius:13px;background:var(--coral-soft);color:var(--coral-deep);display:grid;place-items:center}
.interest__ic svg{width:24px;height:24px}
.interest h4{font-family:var(--font-display);font-size:1.18rem}
.interest p{color:var(--muted);font-size:.93rem}

/* ============================================================
   PHOTOS
   ============================================================ */
.filter-tabs{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.6rem}
.filter-tab{border:1.5px solid var(--coral-soft);background:#fff;border-radius:999px;padding:.6em 1.35em;font-family:var(--font-body);font-weight:500;font-size:.95rem;color:var(--ink);cursor:pointer;transition:all .25s}
.filter-tab:hover{border-color:var(--coral)}
.filter-tab.active{background:var(--coral-deep);border-color:var(--coral-deep);color:#fff}
.masonry{columns:3;column-gap:1.1rem}
@media (max-width:880px){.masonry{columns:2}}
@media (max-width:560px){.masonry{columns:1}}
.ph-card{break-inside:avoid;margin-bottom:1.1rem;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);cursor:zoom-in;position:relative}
.ph-card .photo-ph{transition:transform .6s var(--ease)}
.ph-card:hover .photo-ph{transform:scale(1.06)}
.ph-card .zoom-ic{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.88);display:grid;place-items:center;color:var(--coral-deep);opacity:0;transform:scale(.8);transition:all .3s var(--ease);z-index:4}
.ph-card .zoom-ic svg{width:17px;height:17px}
.ph-card:hover .zoom-ic{opacity:1;transform:scale(1)}
.r-34{aspect-ratio:3/4}.r-11{aspect-ratio:1/1}.r-45{aspect-ratio:4/5}.r-23{aspect-ratio:2/3}.r-54{aspect-ratio:5/4}

/* ============================================================
   VIDEOS
   ============================================================ */
.video-hero{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.video-hero .play-btn{width:96px;height:96px}
.video-hero .play-btn svg{width:38px;height:38px}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem 1.4rem}
@media (max-width:880px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.video-grid{grid-template-columns:1fr}}
.video-card{display:block;cursor:pointer}
.video-thumb{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.video-thumb .photo-ph{transition:transform .6s var(--ease)}
.video-card:hover .video-thumb .photo-ph{transform:scale(1.06)}
.video-thumb .play-btn{width:60px;height:60px}
.video-thumb .play-btn svg{width:24px;height:24px}
.video-dur{position:absolute;bottom:10px;right:10px;background:rgba(46,42,40,.78);color:#fff;font-size:.74rem;font-weight:600;padding:.25em .6em;border-radius:6px}
.video-thumb .watermark{right:auto;left:12px}
.video-meta{padding-top:.95rem}
.video-meta h3{font-family:var(--font-display);font-size:1.18rem;line-height:1.25}
.video-meta .v-sub{font-size:.84rem;color:var(--muted);margin-top:.35rem;display:flex;align-items:center;gap:.5em}
.video-meta .v-sub svg{width:15px;height:15px;flex:none}
.subscribe-bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;background:var(--blush);border-radius:var(--radius-lg);padding:clamp(1.7rem,3vw,2.6rem);margin-top:3rem}

/* ============================================================
   RESUME
   ============================================================ */
.resume-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:1.6rem;align-items:start}
@media (max-width:880px){.resume-grid{grid-template-columns:1fr}}
.resume-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(1.6rem,3vw,2.4rem);border:1px solid rgba(244,168,142,.16)}
.profile-portrait{width:128px;height:128px;border-radius:50%;margin:0 auto;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 55% 42%,var(--coral-soft),var(--blush));box-shadow:0 10px 26px -10px rgba(224,120,86,.5)}
.profile-portrait img{width:120%;height:120%;object-fit:cover;object-position:54% 32%}
.resume-aside .name{font-family:var(--font-display);font-size:1.7rem;text-align:center;margin-top:1rem}
.resume-aside .tagline{text-align:center;color:var(--coral-deep);font-weight:600;font-size:.92rem;letter-spacing:.02em;margin-top:.2rem}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:1.5rem}
.stat{background:var(--ivory);border-radius:var(--radius-sm);padding:.85rem 1rem;margin:0}
.stat dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.stat dd{margin:.25rem 0 0;font-family:var(--font-display);font-size:1.12rem}
.request-box{background:linear-gradient(135deg,var(--blush),var(--coral-soft));border-radius:var(--radius);padding:1.3rem;margin-top:1.4rem}
.request-box .rb-head{display:flex;align-items:center;gap:.6rem;font-weight:600;margin-bottom:.5rem}
.request-box .rb-head svg{width:20px;height:20px;color:var(--coral-deep)}
.request-box p{font-size:.88rem;color:var(--muted);margin-bottom:1rem}
.resume-section{margin-bottom:2.1rem}
.resume-section:last-child{margin-bottom:0}
.resume-section>h3{font-size:1.35rem;display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;padding-bottom:.75rem;border-bottom:1px solid var(--coral-soft)}
.resume-section .num{width:30px;height:30px;border-radius:9px;background:var(--coral-soft);color:var(--coral-deep);display:grid;place-items:center;font-family:var(--font-body);font-weight:700;font-size:.9rem;flex:none}
.skill-list{display:flex;flex-wrap:wrap;gap:.55rem}
.skill{background:var(--blush);border-radius:999px;padding:.45em 1em;font-size:.9rem;font-weight:500;color:var(--ink)}
.credit{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px dashed rgba(244,168,142,.5)}
.credit:last-child{border-bottom:none;padding-bottom:0}
.credit__main strong{font-family:var(--font-display);font-weight:600;font-size:1.06rem;color:var(--ink)}
.credit__main span{display:block;color:var(--muted);font-size:.9rem;margin-top:.15rem}
.credit__role{color:var(--coral-deep);font-weight:600;font-size:.88rem;white-space:nowrap;flex:none}
.accomp{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem 0}
.accomp svg{width:20px;height:20px;color:var(--gold-deep);flex:none;margin-top:2px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:start}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(1.6rem,3.5vw,2.6rem);border:1px solid rgba(244,168,142,.16)}
.contact-aside .a-card{background:var(--blush);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.2rem);margin-bottom:1.4rem}
.contact-aside .a-card h3{font-size:1.4rem;margin-bottom:.6rem}
.contact-aside .a-row{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0}
.contact-aside .a-row .a-ic{width:42px;height:42px;border-radius:12px;background:#fff;color:var(--coral-deep);display:grid;place-items:center;flex:none;box-shadow:var(--shadow-sm)}
.contact-aside .a-row .a-ic svg{width:20px;height:20px}
.contact-aside .a-row strong{display:block;font-family:var(--font-display);font-size:1.05rem}
.contact-aside .a-row span{font-size:.9rem;color:var(--muted)}
