.tf-page-detail {
    color: var(--tf-body-color, #34302b);
}
.tf-page-detail > h1{
    color: var(--tf-heading-color, #1a1a18);
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
    font-weight: 600;
    line-height: 1.18;
    margin: 0 0 1.1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    word-break: break-word;
}

.tf-prose {
    color: var(--tf-body-color, #34302b);
    font-size: 16px;
    line-height: 1.75;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.tf-prose > :first-child{ margin-top: 0; }
.tf-prose > :last-child{ margin-bottom: 0; }

.tf-prose h1,
.tf-prose h2,
.tf-prose h3,
.tf-prose h4,
.tf-prose h5,
.tf-prose h6{
    color: var(--tf-heading-color, #1a1a18);
    font-weight: 700;
    line-height: 1.25;
    margin: 2.2em 0 .7em;
    scroll-margin-top: 90px;
}
.tf-prose h1{ font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); font-weight: 600; }
.tf-prose h2{
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.8rem);
    padding-bottom: .3em;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.tf-prose h3{ font-size: 1.3rem; }
.tf-prose h4{ font-size: 1.12rem; }
.tf-prose h5{ font-size: 1rem; }
.tf-prose h6{ font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tf-eyebrow-color, #6b655e); }

.tf-prose p{ margin: 0 0 1.1em; }

.tf-prose ul,
.tf-prose ol{
    margin: 0 0 1.2em;
    padding-left: 1.6em;
    list-style-position: outside;
}
.tf-prose ul{ list-style-type: disc; }
.tf-prose ol{ list-style-type: decimal; }
.tf-prose ul ul{ list-style-type: circle; }
.tf-prose ul ul ul{ list-style-type: square; }
.tf-prose ul > li{ list-style-type: disc; }
.tf-prose ol > li{ list-style-type: decimal; }
.tf-prose ul ul > li{ list-style-type: circle; }
.tf-prose ul ul ul > li{ list-style-type: square; }
.tf-prose li{
    margin: .4em 0;
    padding-left: .2em;
    list-style-position: outside;
}
.tf-prose li::marker{ color: var(--tf-accent-color, #8b7355); }
.tf-prose li > ul,
.tf-prose li > ol{ margin: .5em 0 .5em; }

.tf-prose dl{ margin: 0 0 1.2em; }
.tf-prose dt{ font-weight: 700; color: var(--tf-heading-color, #1a1a18); margin-top: .8em; }
.tf-prose dd{ margin: 0 0 .4em; padding-left: 1em; }

.tf-prose a{
    color: var(--tf-link-color, #8b7355);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity .15s ease;
}
.tf-prose a:hover{ opacity: .75; }
.tf-prose strong,
.tf-prose b{ font-weight: 700; color: var(--tf-heading-color, #1a1a18); }
.tf-prose em,
.tf-prose i{ font-style: italic; }
.tf-prose mark{ background: #fff3b0; color: inherit; padding: 0 .18em; border-radius: 2px; }
.tf-prose small{ font-size: .85em; color: var(--tf-eyebrow-color, #6b655e); }
.tf-prose sub,
.tf-prose sup{ font-size: .72em; line-height: 0; }

.tf-prose blockquote{
    margin: 1.5em 0;
    padding: .6em 1.2em;
    border-left: 3px solid var(--tf-accent-color, #c9bdb0);
    color: var(--tf-body-color, #575049);
    font-style: italic;
    background: rgba(0,0,0,.015);
    border-radius: 0 6px 6px 0;
}
.tf-prose blockquote > :last-child{ margin-bottom: 0; }

.tf-prose hr{
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
    margin: 2.2em 0;
}

.tf-prose img{ max-width: 100%; height: auto; border-radius: 8px; }
.tf-prose figure{ margin: 1.6em 0; }
.tf-prose figure img{ display: block; margin-inline: auto; }
.tf-prose figcaption{
    margin-top: .5em;
    font-size: .88em;
    color: var(--tf-eyebrow-color, #6b655e);
    text-align: center;
}

.tf-prose table{
    width: 100%;
    border-collapse: collapse;
    margin: 1.6em 0;
    font-size: .95em;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 8px;
}
.tf-prose thead th{
    background: rgba(0,0,0,.045);
    border-bottom: 2px solid rgba(0,0,0,.14);
}
.tf-prose th,
.tf-prose td{
    border: 1px solid rgba(0,0,0,.1);
    padding: .65em .9em;
    text-align: left;
    vertical-align: top;
}
.tf-prose th{ font-weight: 700; color: var(--tf-heading-color, #1a1a18); }
.tf-prose tbody tr:nth-child(even){ background: rgba(0,0,0,.02); }
.tf-prose tbody tr:hover{ background: rgba(0,0,0,.035); }

.tf-prose code{
    background: rgba(0,0,0,.05);
    padding: .12em .4em;
    border-radius: 4px;
    font-size: .9em;
}
.tf-prose pre{
    background: #1a1a18;
    color: #f5f2ee;
    padding: 1em 1.2em;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5em 0;
}
.tf-prose pre code{ background: none; padding: 0; color: inherit; }

@media (max-width: 575.98px){
    .tf-page-detail > h1{ font-size: 1.7rem; }
    .tf-prose{ font-size: 15.5px; }
    .tf-prose th,
    .tf-prose td{ padding: .5em .65em; }
}