/* ============================================================
   ABOUT US — hero, founder story, "we stand for" values
   Mobile-first; tablet polish at 640px; full desktop at 900px.
   Visual language mirrors the home page: cream/ink sections,
   Highway Gothic display headlines, pink accents.
============================================================ */

/* ============================================================
   HERO
============================================================ */
.about-hero {
    position: relative;
    background: var(--cream);
    padding: 140px var(--pad-x) 80px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.about-hero::before,
.about-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}
.about-hero::before {
    width: 420px;
    height: 420px;
    background: var(--pink-soft);
    top: -120px;
    left: -120px;
    opacity: 0.55;
}
.about-hero::after {
    width: 360px;
    height: 360px;
    background: oklch(92.1% 0.028 88 / 0.7);
    bottom: -160px;
    right: -120px;
}
.about-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
}
.about-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    font-weight: 600;
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 24px;
}
.about-hero__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 4px var(--pink-soft);
}
.about-hero__title {
    font-family: var(--font-display);
    font-size: clamp(56px, 14vw, 160px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0;
    color: var(--ink);
}
.about-hero__tagline {
    margin: 16px auto 0;
    font-family: var(--font-display-narrow);
    font-size: clamp(22px, 4vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--pink-deep);
    max-width: 24ch;
}

/* ============================================================
   STORY — founder voice, narrow reading column
============================================================ */
/* ============================================================
   HERO BAND — full-bleed packing photograph
============================================================ */
.about-band {
    background: var(--ink);
    line-height: 0; /* kill the inline-image descender gap under the picture */
    overflow: hidden;
}
.about-band picture {
    display: block;
}
.about-band__img {
    width: 100%;
    /* The source caps at 1440x600, so height is constrained rather than left to
       the intrinsic ratio: a taller band on mobile keeps the bags readable,
       while the desktop cap stops the photo dominating the page. */
    height: clamp(200px, 42vw, 420px);
    object-fit: cover;
    object-position: 50% 45%;
}

/* ============================================================
   STORY — founder voice, long-form paragraphs
============================================================ */
.about-story {
    background: var(--cream);
    padding: 60px var(--pad-x) 100px;
}
/* The reading column is 65ch; the figure breaks out of it slightly so it reads
   as a deliberate plate rather than a cramped inline image. */
.about-story__figure {
    margin: 36px 0;
}
.about-story__figure picture {
    display: block;
}
.about-story__figure-img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    display: block;
}
.about-story__figure figcaption {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: 10px;
    text-align: right;
}
.about-story__inner {
    max-width: 65ch;
    margin: 0 auto;
}
.about-story p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0 0 22px;
}
.about-story__lede {
    font-size: 22px !important;
    line-height: 1.5 !important;
    color: var(--ink) !important;
    margin-bottom: 32px !important;
    font-weight: 500;
}
.about-story__lede::first-letter {
    font-family: var(--font-display);
    font-size: 4em;
    float: left;
    line-height: 0.85;
    padding: 6px 14px 0 0;
    color: var(--pink-deep);
}
.about-story__sign {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: -0.01em;
    color: var(--ink-soft);
}

/* ============================================================
   WE STAND FOR — dark band + value cards
============================================================ */
.about-stand {
    background: var(--ink);
    color: var(--cream);
    padding: 90px var(--pad-x) 110px;
}
.about-stand__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}
.about-stand__head {
    text-align: center;
    max-width: 70ch;
    margin: 0 auto 64px;
}
.about-stand__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    font-weight: 600;
    color: var(--pink);
    margin-bottom: 18px;
}
.about-stand__title {
    font-family: var(--font-display);
    font-size: clamp(40px, 8vw, 96px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0 0 36px;
    color: var(--cream);
}
.about-stand__intro p {
    font-size: 16px;
    line-height: 1.7;
    color: oklch(96.9% 0.015 88 / 0.78);
    margin: 0 0 18px;
    text-align: left;
}
.about-stand__intro p:last-child { margin-bottom: 0; }

.about-stand__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}
.about-stand__card {
    background: oklch(20% 0.008 50);
    border: 1px solid oklch(96.9% 0.015 88 / 0.08);
    border-radius: var(--border-radius-lg);
    padding: 36px 28px;
    position: relative;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.about-stand__card:hover {
    transform: translateY(-2px);
    border-color: oklch(96.9% 0.015 88 / 0.18);
}
.about-stand__num {
    font-family: var(--font-display);
    font-size: 56px;
    line-height: 1;
    color: var(--pink);
    margin-bottom: 18px;
}
.about-stand__card-title {
    font-family: var(--font-display);
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: var(--cream);
}
.about-stand__card p {
    font-size: 15px;
    line-height: 1.65;
    color: oklch(96.9% 0.015 88 / 0.72);
    margin: 0;
}

/* ============================================================
   STAND CARD MEDIA — photo slot, or a branded tile while empty

   Breaks out of the card's own padding to sit flush with its edges. Two of the
   three slots have no photograph yet, so an unfilled slot renders the halftone
   dot texture used elsewhere on the site rather than collapsing — the grid
   reads as deliberate instead of half-built, and a slot becomes a real photo
   with no markup or CSS change.
============================================================ */
.about-stand__media {
    margin: -36px -28px 24px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    background: var(--ink);
}
.about-stand__media picture {
    display: block;
    width: 100%;
    height: 100%;
}
.about-stand__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* An unfilled slot must hold the grid's shape without competing with the cards
   that do have a photograph, so the tile is a quiet warm gradient with the
   halftone dots masked to a soft off-centre bloom — the same treatment as
   .hero__halftone and .values__halftone. Dots at full strength across the whole
   rectangle read as a test pattern and pull more attention than the real
   photography, which is exactly backwards. */
.about-stand__media--empty {
    position: relative;
    background: linear-gradient(150deg, oklch(24% 0.035 18) 0%, oklch(17% 0.010 45) 72%);
}
.about-stand__media--empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--pink) 1px, transparent 1.5px);
    background-size: 10px 10px;
    -webkit-mask-image: radial-gradient(circle at 72% 28%, black 8%, transparent 62%);
    mask-image: radial-gradient(circle at 72% 28%, black 8%, transparent 62%);
    opacity: 0.30;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (min-width: 640px) {
    .about-hero { padding: 160px var(--pad-x) 100px; }
    .about-story { padding: 80px var(--pad-x) 120px; }
    .about-stand__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (min-width: 900px) {
    .about-hero { padding: 200px var(--pad-x) 130px; }
    .about-story p { font-size: 18px; }
    .about-story__lede { font-size: 24px !important; }
    /* Break the figure out past the 65ch reading column. */
    .about-story__figure {
        margin: 48px -60px;
    }
    .about-stand { padding: 130px var(--pad-x) 150px; }
    .about-stand__head { margin-bottom: 80px; }
    .about-stand__intro p { font-size: 17px; }
    .about-stand__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
    .about-stand__card { padding: 44px 32px; }
    .about-stand__num { font-size: 64px; }
    .about-stand__card-title { font-size: 34px; }
    /* Card padding grows at this width, so the media breakout must match it. */
    .about-stand__media { margin: -44px -32px 28px; }
}