/* =========================================================
   elscii — About page
   ========================================================= */
.about-page {
    --about-cream: #faf7f1;
    --leaf-green: #a8cb67;
    --leaf-orange: #f58a4e;
    background: var(--about-cream);
    font-family: var(--font-2);
}

.about-page main { overflow: clip; }
.about-page p { font-family: var(--font-2); }

/* Part 1 — hero */
.about-hero {
    padding: 0;
    background: var(--about-cream);
}
.about-hero-frame {
    position: relative;
    isolation: isolate;
    min-height: clamp(520px, 54vw, 890px);
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 4.5rem 4.5rem;
    background: #3b4633 url('../assets/about/hero-bg.jpg') center 53% / cover no-repeat;
}
.about-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.2) 100%);
}
.about-hero-copy {
    position: absolute;
    z-index: 4;
    top: 29%;
    left: clamp(28px, 12.7vw, 220px);
    width: min(48%, 720px);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.about-hero-copy h1 {
    font-family: var(--font-1);
    font-size: clamp(2.7rem, 5.8vw, 6.1rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -.025em;
    margin-bottom: clamp(24px, 3.7vw, 58px);
}
.about-hero-copy p {
    max-width: 620px;
    font-size: clamp(1.15rem, 1.65vw, 1.85rem);
    line-height: 1.45;
    letter-spacing: .035em;
}
.about-hero-avatar {
    position: absolute;
    z-index: 2;
    width: clamp(280px, 30vw, 510px);
    max-height: 92%;
    object-fit: contain;
    object-position: bottom;
    right: clamp(20px, 19vw, 315px);
    bottom: -2px;
    filter: drop-shadow(0 10px 5px rgba(0,0,0,.18));
    animation: about-avatar-arrive .9s cubic-bezier(.2,.8,.2,1) both;
}
.about-hero-cat {
    position: absolute;
    z-index: 4;
    width: clamp(88px, 10vw, 160px);
    left: clamp(18px, 12vw, 205px);
    bottom: -2px;
    filter: drop-shadow(0 5px 4px rgba(0,0,0,.18));
    animation: cat-pop-in .75s .25s both;
}
.falling-leaves { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.falling-leaf {
    position: absolute;
    top: -35px;
    left: var(--left);
    width: var(--size);
    height: calc(var(--size) * .58);
    border-radius: 100% 0 100% 0;
    background: var(--leaf-color);
    opacity: .9;
    transform: rotate(var(--tilt));
    animation: leaf-fall var(--duration) var(--delay) linear infinite;
}

/* Part 2 — about Elena */
.about-story {
    padding: clamp(70px, 8vw, 138px) clamp(24px, 6.6vw, 110px) clamp(65px, 8vw, 130px);
    max-width: 1760px;
    margin-inline: auto;
}
.story-row {
    display: grid;
    grid-template-columns: minmax(250px, .85fr) minmax(0, 2fr);
    align-items: start;
    column-gap: clamp(35px, 5.5vw, 92px);
}
.story-intro { margin-bottom: clamp(75px, 9vw, 150px); }
.story-art img { display: block; width: 100%; height: auto; object-fit: contain; }
.story-map-art { display: flex; justify-content: center; align-items: flex-start; padding-top: 4px; }
.story-map-art img { max-width: 420px; }
.story-copy {
    font-size: clamp(1.1rem, 1.55vw, 1.65rem);
    line-height: 1.5;
    letter-spacing: .035em;
}
.story-copy-intro { padding-top: 5px; }
.story-cafe { grid-template-columns: minmax(0, 1.65fr) minmax(240px, .9fr); align-items: end; }
.story-copy-cafe { max-width: 920px; }
.story-copy-cafe strong { font-weight: 600; }
.photo-credits { list-style: none; padding: 24px 0 0; color: #f49a6b; line-height: 1.8; }
.story-cafe-art { display: flex; justify-content: flex-end; align-items: end; }
.story-cafe-art img { width: min(100%, 470px); }

/* Part 3 — creative philosophy */
.about-philosophy {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.13fr);
    align-items: center;
    gap: clamp(36px, 5.5vw, 90px);
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(35px, 4vw, 70px) clamp(24px, 6.6vw, 110px) clamp(130px, 12vw, 205px);
}
.philosophy-art img { display: block; width: 100%; max-width: 760px; margin-inline: auto; }
.philosophy-copy {
    text-align: right;
    font-size: clamp(1.05rem, 1.48vw, 1.58rem);
    line-height: 1.5;
    letter-spacing: .035em;
}
.philosophy-invite { margin-top: clamp(45px, 5.5vw, 90px); }
.philosophy-signoff { margin-top: 36px; }
.philosophy-cat {
    position: absolute;
    width: clamp(125px, 14vw, 230px);
    right: clamp(18px, 18vw, 300px);
    bottom: 0;
    filter: drop-shadow(0 4px 3px rgba(0,0,0,.1));
}

/* Reveal elements as sections enter the viewport */
.about-page .reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
.about-page .reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes leaf-fall {
    0% { transform: translate3d(0,-40px,0) rotate(var(--tilt)); }
    45% { transform: translate3d(var(--sway),48vh,0) rotate(calc(var(--tilt) + 150deg)); }
    100% { transform: translate3d(calc(var(--sway) * -.5),105vh,0) rotate(calc(var(--tilt) + 330deg)); }
}
@keyframes about-avatar-arrive { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cat-pop-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 900px) {
    .about-hero-frame { min-height: 600px; border-radius: 0 0 2.5rem 2.5rem; background-position: 53% center; }
    .about-hero-copy { top: 14%; left: 6%; width: 60%; }
    .about-hero-copy h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); margin-bottom: 22px; }
    .about-hero-copy p { font-size: clamp(1.05rem, 2.3vw, 1.35rem); max-width: 460px; }
    .about-hero-avatar { width: clamp(250px, 42vw, 380px); right: 3%; }
    .about-hero-cat { width: 105px; left: 5%; }
    .story-row { grid-template-columns: minmax(180px, .7fr) minmax(0, 1.5fr); column-gap: 32px; }
    .story-cafe { grid-template-columns: minmax(0, 1.4fr) minmax(180px, .8fr); }
    .about-philosophy { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 600px) {
    .about-hero-frame { min-height: 690px; border-radius: 0 0 1.7rem 1.7rem; background-position: 55% center; }
    .about-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.26) 53%, rgba(0,0,0,.18) 100%); }
    .about-hero-copy { top: 10%; left: 7%; width: 86%; }
    .about-hero-copy h1 { font-size: clamp(2.65rem, 11vw, 4rem); margin-bottom: 17px; }
    .about-hero-copy p { max-width: 360px; font-size: 1.08rem; line-height: 1.4; }
    .about-hero-avatar { width: min(78vw, 350px); max-height: 60%; right: 2%; bottom: 0; }
    .about-hero-cat { width: 88px; left: 3%; bottom: 0; }
    .about-story { padding: 62px 25px 42px; }
    .story-row, .story-cafe { display: flex; flex-direction: column; gap: 24px; }
    .story-intro { margin-bottom: 66px; }
    .story-map-art { width: 72%; align-self: center; }
    .story-map-art img { max-width: 280px; }
    .story-copy { font-size: 1.13rem; line-height: 1.48; }
    .story-copy-intro { padding-top: 0; }
    .story-cafe { gap: 20px; }
    .story-cafe-art { width: 78%; align-self: flex-end; margin-top: 5px; }
    .photo-credits { padding-top: 15px; }
    .about-philosophy { display: flex; flex-direction: column; gap: 24px; padding: 35px 25px 145px; }
    .philosophy-art { width: 100%; }
    .philosophy-art img { max-width: 460px; }
    .philosophy-copy { text-align: left; font-size: 1.1rem; line-height: 1.5; }
    .philosophy-invite { margin-top: 32px; }
    .philosophy-signoff { text-align: right; margin-top: 25px; }
    .philosophy-cat { width: 120px; right: 22px; bottom: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .falling-leaves, .about-hero-avatar, .about-hero-cat { display: none; }
    .about-page .reveal, .about-page .reveal.is-visible { opacity: 1; transform: none; transition: none; }
    * { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}