/* ============================================================================
   Legal pages — privacy, terms, legal info.

   Long-form reading, so the constraint is the measure: a line of body text
   stays near 68 characters, which is where the eye stops having to hunt for
   the start of the next one. Everything else here serves that.
   ========================================================================= */
.legal {
    padding: 120px 20px 40px;
    background: #fff;
}
.legal__inner {
    max-width: 720px;
    margin: 0 auto;
}
.legal__kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c96a2f;
}
.legal__title {
    margin: 6px 0 8px;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 800;
    color: #1c0f08;
}
.legal__updated {
    margin: 0 0 32px;
    font-size: 13px;
    color: #8a7261;
}
.legal__lede {
    margin: 0 0 32px;
    padding: 16px 18px;
    font-size: 16px;
    line-height: 1.7;
    color: #4a3d34;
    background: #fff3e6;
    border-left: 3px solid #e28244;
    border-radius: 0 8px 8px 0;
}
.legal h2 {
    margin: 36px 0 10px;
    font-size: 21px;
    font-weight: 700;
    color: #1c0f08;
}
.legal h3 {
    margin: 24px 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1c0f08;
}
.legal p,
.legal li {
    font-size: 15.5px;
    line-height: 1.75;
    color: #4a3d34;
}
.legal p {
    margin: 0 0 14px;
}
.legal ul {
    margin: 0 0 16px;
    padding-left: 22px;
}
.legal li {
    margin-bottom: 7px;
}
.legal a {
    color: #c96a2f;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal a:hover {
    color: #a95a1e;
}

/*
 * The prose link rule above is deliberately broad, which means it also caught
 * the call-to-action button and left it underlined in brand orange on a brand
 * orange fill. A button is not a link in a sentence: it keeps the site's own
 * button treatment.
 */
.legal a.theme-btn,
.legal a.theme-btn:hover {
    color: #fff;
    text-decoration: none;
}

/* Business facts read as a list of pairs, not as prose. */
.legal__facts {
    margin: 0 0 16px;
    padding: 0;
}
.legal__facts > div {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0e9e0;
}
.legal__facts dt {
    font-size: 13px;
    font-weight: 700;
    color: #8a7261;
}
.legal__facts dd {
    margin: 0;
    font-size: 15px;
    color: #1c0f08;
}
@media (max-width: 560px) {
    .legal__facts > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .legal__title {
        font-size: 30px;
    }
    .legal {
        padding-top: 100px;
    }
}

.legal__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid #ece2d6;
    font-size: 14px;
}

/* These pages carry no site footer of their own. */
.page-credit {
    padding: 28px 20px 34px;
    text-align: center;
    font-size: 12px;
    line-height: 1.7;
    color: #8a7261;
    background: #f6f1ea;
    border-top: 1px solid #ece2d6;
}
.page-credit p { margin: 0; }
.page-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.page-credit a:hover { color: #c96a2f; }

/* --- Blog index -----------------------------------------------------------
   Cards, not a table: a post is chosen by reading its title and its opening
   line, and a grid of columns hides both.
   ------------------------------------------------------------------------ */
.post-list {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.post-card a {
    display: block;
    padding: 20px 22px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #ece2d6;
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.post-card a:hover {
    border-color: #e28244;
    box-shadow: 0 4px 14px rgba(28, 15, 8, 0.07);
    transform: translateY(-1px);
}
/* Fixed aspect ratio so the list does not reflow as each cover loads. */
.post-card__cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 0 14px;
    border-radius: 8px;
    background: #f3ece4;
}
.post-card__meta {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c96a2f;
}
.post-card__title {
    display: block;
    margin: 6px 0 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #1c0f08;
}
.post-card__excerpt {
    display: block;
    font-size: 15px;
    line-height: 1.65;
    color: #4a3d34;
}

/* The cover on a post's own page, between the byline and the opening line. */
.post-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 22px 0 26px;
    border-radius: 12px;
    background: #f3ece4;
}

/* Nothing published yet is a state the generator will pass through. */
.post-empty {
    margin-top: 28px;
    padding: 40px 22px;
    text-align: center;
    font-size: 15px;
    color: #8a7261;
    background: #faf7f3;
    border: 1px dashed #ece2d6;
    border-radius: 12px;
}