/*
 * Information pages - About and FAQ. Shares the site header and footer with
 * the rest of the shop; this file owns only the page body.
 */
.info-page {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 6rem) 5%;
}

.info-page h1 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.1;
    margin: 0 0 1rem;
}

.info-lede {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}

.info-page p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
}

.info-page a { color: var(--color-text); text-underline-offset: 3px; }

/* ---- About: story sections ---- */
.about-section {
    padding: clamp(1.75rem, 4vw, 2.75rem) 0;
    border-top: 1px solid var(--color-border);
}

.about-section h2 {
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    margin: 0 0 1rem;
}

/* Photo slot. Replace the .todo-photo div with an <img> of the same width and
   the layout needs no other change. */
.about-photo { margin: 1.5rem 0 0; }

.todo-photo {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background: #FFE9EC;
    border: 1px dashed #9D051C;
    color: #6B0413;
    font-size: 0.9rem;
}

.about-photo img { width: 100%; max-width: 420px; height: auto; display: block; }
.about-photo-wide { margin: 1.5rem 0; }
.about-photo-wide img { max-width: 100%; }

/* Placeholder copy. Same pink as .todo on the legal pages, so nothing slips
   through to launch unnoticed. */
.todo-text {
    background: #FFE9EC;
    border-left: 3px solid #9D051C;
    padding: 0.6rem 0.9rem;
    color: #6B0413 !important;
    font-size: 0.95rem !important;
}

/* ---- FAQ accordion ---- */
.faq-list { border-bottom: 1px solid var(--color-border); }

.faq-item { border-top: 1px solid var(--color-border); }

.faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 2.5rem 1.1rem 0;
    position: relative;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
    content: "+";
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
}

.faq-item[open] > summary::after { content: "\2013"; }

.faq-item > summary:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }

.faq-answer { padding: 0 0 1.25rem; }
.faq-answer p:last-child { margin-bottom: 0; }

/* About page: headings and links in the brand red (#9D051C, 8.5:1 on white). */
.about-page h1,
.about-page h2,
.about-page a { color: #9D051C; }
.about-page a:hover { color: #7a0416; }