/* ============================================================
   About page styles. Loaded after home.css, so it reuses the
   :root tokens defined there (--c-ink, --c-terracotta, --ff-sans,
   --ff-serif, --ff-mono, --ff-dm). Mobile-first; desktop overrides
   live in the min-width:1024px block at the bottom.
   ============================================================ */

.about-section-1 {
    background: #FFFCF5;
    padding: 32px 20px 18px;
    overflow: hidden; /* clips the founder image where it bleeds past the right edge on mobile */
}

.about-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title media"
        "sub   sub"
        "body  body";
    column-gap: 16px;
    align-items: start;
}

/* --- Headline: "Our faces deserve" / "better." --- */
.about-title { grid-area: title; margin: 0; }
.about-title .l1 {
    display: block;
    color: #2E2A27;
    font-family: var(--ff-sans);
    font-size: 30px;
    font-weight: 400;
    line-height: 36px;
}
.about-title .l2 {
    display: block;
    color: #7A6B50;
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 60px;
    line-height: 64px;
}

/* --- Founder portrait ---
   Mobile: fixed 223x161 card that bleeds slightly past the right edge
   (clipped by .about-section-1 overflow:hidden). */
.about-media {
    grid-area: media;
    display: block;
    width: 223px;
    height: 161px;
    position: relative;
}
.about-media img {
    width: 223px;
    height: 161px;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
}

/* short rule that sits above the subheading on mobile — left-aligned,
   20px above the subheading text */
.about-rule-top {
    width: 56px;
    height: 1px;
    background: #C2B6A4;
    margin: 0 0 20px 0;
}

/* --- Subheading --- */
.about-sub {
    grid-area: sub;
    color: rgba(26, 20, 16, 0.55);
    font-family: var(--ff-sans);
    font-size: 25px;
    font-weight: 400;
    line-height: 34.4px;
    text-align: center;
    max-width: calc(100vw - 40px);
    margin: 28px 0 0;
}

/* --- Body copy ---
   Cap to the viewport (minus the 20px L/R section padding) so the copy keeps
   a 20px right gutter and never spills past the over-wide title/image grid. */
.about-body { grid-area: body; margin-top: 18px; max-width: calc(100vw - 40px); }
.about-body p {
    color: #5C554E;
    font-family: var(--ff-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 27px;
}
.about-body p:last-child { margin-bottom: 0; }
.about-body em {
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: var(--c-terracotta);
}

/* --- Coda: eyebrow + rule + pull-quote + rule + closing paragraph ---
   Vertical rhythm (mobile): eyebrow 25px below the body; 20px to rule 1;
   10px to pull-quote; 10px to rule 2; 20px to the closing paragraph. Each
   gap is set on one side only so adjacent margins don't double up. */
.about-coda {
    max-width: 1200px;
    margin: 25px auto 0;
}
.about-eyebrow {
    color: var(--c-terracotta);
    font-family: var(--ff-mono);
    font-size: 16px;
    font-weight: 400;
    line-height: 131.5%;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 20px 0;
}
.about-rule {
    width: 64px;
    height: 1px;
    background: #C2B6A4;
    margin: 0 auto;
}
.about-pullquote {
    color: #7A6B50;
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    margin: 10px 0;
}
.about-pullquote .tc { color: var(--c-terracotta); }
.about-coda-body {
    color: #7A6B50;
    font-family: var(--ff-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    margin: 20px 0 0;
}

/* ============================================================
   Section 2 — skincare / treatments photo cards (mobile).
   Each card: 300x300 photo (16px radius) with a 79px round icon
   medallion overlapping its bottom-left, then title + body.
   ============================================================ */
.about-section-2 {
    background: #FFFCF5;
    padding: 0 20px 48px;
}
.about-card {
    /* When stacked (<=1023px) the card grows fluidly: ~300px at mobile up to
       504px at 1023px (matching the desktop size for a seamless transition). */
    width: clamp(300px, calc(152px + 34.4vw), 504px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.about-card + .about-card { margin-top: 40px; }
.about-card-media {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
}
.about-card-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}
.about-card-icon {
    position: absolute;
    /* circle centered on the photo's bottom-left corner (half of 79px) */
    left: -39.5px;
    bottom: -39.5px;
    width: 79px;
    height: 79px;
    border-radius: 50%;
    background: #F2EBE1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-card-icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
}
.about-card-title {
    color: #5C554E;
    font-family: var(--ff-sans);
    font-size: 20px;
    font-weight: 400;
    line-height: 37px;
    margin: 0;
}
.about-card-body {
    color: #5C554E;
    font-family: var(--ff-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin: 2px 0 0;
    max-width: 300px;
}

/* ============================================================
   Section 3 — founder note band (mobile). Tan background, body
   copy in Beltram, closing with Tara's signature.
   ============================================================ */
.about-section-3 {
    background: #F2EAD8;
    padding: 40px 20px 25px;
}
.about-section-3 p {
    color: #7A6B50;
    font-family: var(--ff-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin: 0 0 26px;
}
.about-signature {
    display: block;
    max-width: 100px;
    height: auto;
    margin-top: 8px;
    margin-left: 50px !important;
    /* drops any white matte so the ink blends onto the tan band */
    mix-blend-mode: multiply;
}

/* ============================================================
   Desktop (>= 1024px): two-column hero with the portrait as a
   tall right column spanning the title, subheading, and body.
   Everything left-aligned; headline scales way up.
   ============================================================ */
@media (min-width: 1024px) {
    /* Background bleeds full width; the 56px horizontal padding gives small
       desktop widths breathing room while the inner caps the content. */
    .about-section-1 { padding: 48px 56px 20px; }

    /* Content capped at 1200px and centered to match the home page's
       .section-inner width and left-edge alignment. No inner padding (the
       section supplies it). Block flow (not grid) so the floated portrait
       lets the text wrap to its left and continue beneath it. */
    .about-hero-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: flow-root;
        padding-left: 0;
        padding-right: 0;
    }

    .about-title { padding-left: 0; padding-right: 0; margin: 0; }
    .about-title .l1 { font-size: 80px; line-height: 87.171px; }
    .about-title .l2 { font-size: 150px; line-height: 87.171px; }

    /* Portrait: floats right at ~631/1328 of the content width (631px at
       1440px), 39px gutter to the text. 314/419 aspect, cropped 200px off the
       bottom (negative margin pulled up + overflow:hidden clips the slice). */
    .about-media {
        float: right;
        width: 47.51%;
        height: auto;
        margin: 0 0 0 39px;
        position: static;
        top: auto;
        right: auto;
        overflow: hidden;
        /* Responsive side padding: 10px (down to mobile) -> 20px (>=1200)
           -> 30px (>=1440). Overrides live in the breakpoints below. */
        padding-left: 10px;
        padding-right: 10px;
    }
    .about-media img {
        width: 100%;
        height: auto;
        aspect-ratio: 314 / 419;
        object-fit: cover;
        object-position: top center;
        border-radius: 150px 150px 0 0;
        margin-bottom: -200px;
    }

    .about-rule-top { display: none; }

    .about-sub {
        text-align: left;
        font-size: 30px;
        line-height: 34.4px;
        max-width: none;
        margin-top: 56px;
    }

    /* 10px below the subheading; loose 37px leading per spec. Full width so it
       wraps beside the photo and fills in beneath it as the page narrows. */
    .about-body { margin-top: 10px; max-width: none; }
    .about-body p { font-size: 15px; line-height: 37px; }
    .about-body em { line-height: 37px; }

    /* 50px below the hero; capped/centered to match the hero column. Clear the
       float so it never sits beside the photo. */
    .about-coda {
        max-width: 1200px;
        margin: 50px auto 0;
        padding-left: 0;
        padding-right: 0;
        clear: both;
    }
    .about-eyebrow {
        text-align: left;
        font-size: 18px;
        line-height: 15px;
        margin: 0 0 24px 0;
    }
    /* Only the first divider shows on desktop (2px); the second is hidden. */
    .about-rule { margin-left: 0; margin-right: auto; height: 2px; }
    .about-rule-2 { display: none; }
    .about-pullquote {
        text-align: left;
        font-size: 25px;
        line-height: 41px;
        margin: 10px 0 0;
    }
    .about-coda-body {
        font-size: 15px;
        line-height: 37px;
        margin-top: 16px;
        max-width: 1120px;
    }
}

/* Header image side padding steps up with the viewport. */
@media (min-width: 1200px) {
    .about-media { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 1440px) {
    .about-media { padding-left: 30px; padding-right: 30px; }
}

/* ============================================================
   Section 2 — desktop: two cards side by side, centered, 60px
   apart. Images cap at 504px (16px radius); headings 30px,
   subheadings 15px (line-height 37px).
   ============================================================ */
@media (min-width: 1024px) {
    .about-section-2 {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 60px;
        padding: 24px 56px 72px;
    }
    .about-card {
        width: 504px;
        max-width: 504px;
        margin: 0;
    }
    .about-card + .about-card { margin-top: 0; }
    .about-card-media { width: 100%; margin-bottom: 50px; }
    /* 504x361 = the 583px-tall frame cropped 222px (111 off top + bottom,
       centered via object-fit:cover). */
    .about-card-photo { aspect-ratio: 504 / 361; }
    .about-card-title { font-size: 30px; line-height: 37px; }
    .about-card-body { font-size: 15px; line-height: 37px; max-width: none; }
}

/* Section 3 — desktop: align the note text + signature with the 1200px
   content column (matching section 1). Tan background still bleeds full
   width; padding centers the content and matches section 1's left edge. */
@media (min-width: 1024px) {
    .about-section-3 {
        padding-left: max(56px, calc((100% - 1200px) / 2));
        padding-right: max(56px, calc((100% - 1200px) / 2));
    }
}

/* Headline mid-size band (766–1023px): between the mobile and desktop scales. */
@media (min-width: 766px) and (max-width: 1023px) {
    .about-title .l1 { font-size: 60px; line-height: 64px; }
    .about-title .l2 { font-size: 70px; line-height: 74px; }
}

/* Signature + dash scale up on tablet/mobile (<=766px). The signature is a
   wide graphic, so width drives the size; height stays natural (see note). */
@media (max-width: 766px) {
    .about-signature { width: 318px; max-width: 80px; height: auto; margin-left: 20px !important;}
}

/* ============================================================
   Shared marketing-header tweaks — ABOUT PAGE ONLY.
   about.css is loaded only on /about, so these refine the shared
   _header.html here without touching home.css / the home page.
   ============================================================ */
.mobile-drawer { padding: 0 20px 24px 20px; }
.mobile-drawer-head { height: 64px; margin-bottom: 0; }
.mobile-drawer-head img.logo { height: 24px; }
@media (min-width: 1024px) {
    .home-header .nav-desktop {
        position: static;
        left: auto;
        transform: none;
        margin-left: auto;
        margin-right: 30px;
    }
}