.about {
    padding-top: calc(var(--nav-h) + var(--space-12));
    padding-bottom: var(--space-20);
}

/* MOBILE (base): doodle full-width on top, then the photo floats to the right
   so the "About" title and bio wrap around it (full width below the photo).
   The grid-area names below are only used by the desktop layout. */
.about__grid {
    display: block;
    position: relative;
}

.about__doodle  { grid-area: doodle; }
.about__title   { grid-area: title; }
.about__content { grid-area: content; }

.about__media {
    grid-area: media;
    position: relative;
    float: right;
    width: 34%;
    /* Cap so the photo can't blow up in landscape (wider viewport, still below
       the desktop breakpoint). Reset on desktop. */
    max-width: 11rem;
    /* No magic top margin: the photo simply follows the intro line in the flow,
       so the intro is always full-width and the photo sits under it. */
    margin: 0 0 var(--space-4) var(--space-5);
}

/* The photo's own "Influenced by" is desktop-only; on mobile it moves to the
   bottom (a separate .about__influences-m block). */
.about__media .about__influences {
    display: none;
}

/* Hand-drawn "Chupee" doodle. MOBILE: absolutely positioned in the band above
   "About", arrow pointing up-left at the logo's red O (desktop repositions it). */
.about__doodle {
    display: flex;
    align-items: flex-end;
    gap: var(--space-1);
    position: absolute;
    top: -4rem;
    left: 4.5rem;
    z-index: 60;
    pointer-events: none;
    color: var(--accent);
}

.about__doodle-arrow {
    flex: none;
    width: 3.4rem;
    height: auto;
    /* Slightly counter-clockwise on mobile (reset on desktop). */
    transform: translateY(-0.1rem) rotate(-14deg);
}

.about__doodle-word {
    font-family: "Caveat", "Segoe Script", cursive;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    padding-right: 0.25em;
    /* Mobile: raised to sit nicely with the arrow (desktop resets to 0.4rem). */
    transform: translateY(0.1rem) rotate(-5deg);
}

/* Matted gallery frame. MOBILE mat is thicker (desktop resets to 1rem). */
.about__frame {
    box-sizing: border-box;
    width: 100%;
    max-width: 15.5rem;
    padding: 0.72rem;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow:
        inset 0 0 0 1px var(--border),
        var(--elev-2);
}

.about__photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 2px;
    background: url("/assets/img/ron.jpg") center 25% / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    /* Theft deterrents: not an <img>, so no "Save Image As"; block drag + selection. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Influences (under the photo) */
.about__influences {
    margin-top: var(--space-3);
}

.about__influences-title {
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
}

.about__influences-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.about__influence {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.4rem 0.8rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}

.about__influence::after {
    content: "\2197";
    font-size: 0.82em;
}

.about__influence:hover {
    color: var(--accent);
    border-color: var(--accent-soft);
}

/* Text column */
.about__content {
    max-width: 42rem;
}

.about__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
    color: var(--text-strong);
    /* MOBILE: sits below the doodle band; half-line gap before the intro
       (desktop resets these margins). */
    margin-top: 2.75rem;
    margin-bottom: var(--space-3);
}

/* MOBILE: "Influenced by" line moved to the bottom (above the welcome divider),
   label + chip side by side. Hidden on desktop. */
.about__influences-m {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    clear: right;
    margin-top: var(--space-6);
}

.about__influences-m__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-faint);
}

.about__body {
    max-width: 42rem;
    color: var(--text-muted);
    font-size: var(--text-md);
    line-height: var(--lh-relaxed);
}

.about__body p + p {
    margin-top: var(--space-4);
}

.about__body p:first-child {
    color: var(--text-strong);
    font-weight: 600;
    font-size: var(--text-lg);
    /* MOBILE: the real intro is replaced by the full-width .about__intro-m that
       sits above the photo; hide this one (shown again on desktop). */
    display: none;
}

/* MOBILE-only intro line: full width, above the photo, so it never wraps
   beside the photo. Same size as the body text. Hidden on desktop. */
.about__intro-m {
    color: var(--text-strong);
    font-weight: 600;
    font-size: var(--text-md);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-3);
}

/* PHONES in portrait only: force the intro to break after "person"
   ("Hello, I'm Ron, the person" / "behind RONZ.DEV"). Tablets/landscape flow
   naturally. */
@media (max-width: 30rem) and (orientation: portrait) {
    .about__intro-br::before {
        content: "\A";
        white-space: pre;
    }
}

/* MOBILE-only hand-drawn arrow in the gap above the photo, pointing from the
   intro line toward the photo. Hidden on desktop. */
.about__photo-arrow {
    /* Anchored to the photo (its parent), so it always sits just above the
       photo and moves with it in any orientation. */
    position: absolute;
    bottom: calc(100% + 0.6rem);
    right: 3rem;
    width: 6rem;
    color: var(--text-strong);
    opacity: 0.85;
    pointer-events: none;
}

.about__photo-arrow svg {
    display: block;
    width: 100%;
    height: auto;
}

.about__body strong {
    color: var(--text-strong);
    font-weight: 700;
}

.about__brand {
    color: var(--accent);
    font-weight: 700;
}

/* "say hello" link with a hand-drawn red underline (matches the home hero). */
.about__hello {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dur-1) ease;
}

.about__hello:hover {
    color: var(--text-strong);
}

.scribble {
    position: relative;
    white-space: nowrap;
}

.scribble::after {
    content: "";
    position: absolute;
    left: -0.06em;
    right: -0.06em;
    bottom: -0.16em;
    height: 0.42em;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 15 4 28 9 42 6 C 56 3 70 10 84 6 C 98 3 110 9 117 5.5' stroke='%23ff3b30' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Welcome moment */
.about__welcome {
    max-width: 42rem;
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-strong);
}

.about__count {
    color: var(--accent);
}

/* About page only: nav logo is just the big red O (Chupee) from the start,
   skipping the "RONZ.DEV" wordmark intro. */
body[data-project="about"] .brand--nav .brand-seg {
    max-width: 0 !important;
    opacity: 0 !important;
    animation: none !important;
}

body[data-project="about"] .brand--nav .brand-o {
    transform: translateX(1.05em) scale(2.9) !important;
    animation: none !important;
    overflow: visible !important;
}

body[data-project="about"] .brand--nav .brand-o__eyes,
body[data-project="about"] .brand--nav .brand-o__eyes i,
body[data-project="about"] .brand--nav .brand-o::after {
    animation: none !important;
}

/* DESKTOP / TABLET (>= 52rem): the approved v3 two-column layout, unchanged.
   Placed last so it cleanly overrides the mobile (base) rules above. */
@media (min-width: 52rem) {
    .about__grid {
        position: relative;
        display: grid;
        grid-template-columns: 15.5rem minmax(0, 1fr);
        grid-template-areas:
            "doodle title"
            "media  content";
        column-gap: var(--space-16);
        row-gap: var(--space-6);
        align-items: start;
    }

    /* Undo the mobile float so the photo becomes the left grid column. */
    .about__media {
        float: none;
        width: auto;
        max-width: none;
        margin: 0;
    }

    /* Doodle floats up into the band near the nav, out of the column flow. */
    .about__doodle {
        position: absolute;
        float: none;
        top: -2rem;
        left: 2.75rem;
        margin: 0;
        z-index: auto;
    }

    .about__doodle-arrow {
        transform: translateY(-0.1rem);
    }

    .about__doodle-word {
        transform: translateY(0.4rem) rotate(-5deg);
    }

    .about__frame {
        padding: 1rem;
        margin-top: 4.5rem;
    }

    /* Restore the photo's "Influenced by" (hidden on mobile) and hide the
       mobile-only bottom one, so desktop is exactly v3. */
    .about__media .about__influences {
        display: block;
        margin-top: var(--space-6);
    }

    .about__influences-m {
        display: none;
    }

    /* Reset the mobile-only title margins. */
    .about__title {
        margin: 0;
    }

    /* Restore the real intro paragraph; hide the mobile-only intro line. */
    .about__body p:first-child {
        display: block;
        font-size: var(--text-lg);
        letter-spacing: normal;
        white-space: normal;
    }

    .about__intro-m {
        display: none;
    }

    /* Desktop: show the arrow above the (lowered) photo, mirrored so it points
       from the intro sentence (right) down to the photo (left). */
    .about__photo-arrow {
        display: block;
        top: -0.5rem;
        left: 12rem;
        right: auto;
        bottom: auto;
        width: 6.5rem;
        transform: scaleX(-1);
    }

    .about__welcome {
        margin-top: var(--space-8);
    }
}