:root {
    --tj-text-color: rgba(76,76,76,1);
    --tj-font-heading: 'DM Serif Text', sans-serif;
    --tj-font-body: 'Kanit', sans-serif;
    --tj-link: rgba(68,174, 207, 1);
}
.tj-text-section {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.tj-text-section__container{
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex ;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.56rem;
    padding-top: 2.81rem;
    padding-right: 1.87rem;
    padding-bottom: 1.87rem;
    margin: 0 auto;
}
.tj-rt {
    position: relative;
    width: 100%;
    color: var(--tj-text-color);
    font-family: var(--tj-font-body);
    font-weight: 300;
    font-size: 1.3125rem;
    line-height: 1.52;
    gap: 1.56rem;
    display: flex;
    flex-direction: column;
}

/* Spacing rules */
.tj-rt > *:first-child { margin-top: 0; }
.tj-rt > *:last-child { margin-bottom: 0; }

.tj-rt p {margin: 0;}
.tj-rt p + p { margin-top: 0.5rem; }

.tj-rt h1,
.tj-rt h2,
.tj-rt h3,
.tj-rt h4,
.tj-rt h5,
.tj-rt h6 {
    margin: 0;
    font-family: var(--tj-font-heading);
    line-height: 1.16;
    font-weight: 200;
    color: var(--tj-text-color);
}

.tj-rt h1 i,
.tj-rt h2 i,
.tj-rt h3 i,
.tj-rt h4 i,
.tj-rt h5 i,
.tj-rt h6 i{
    font-family: var(--tj-font-heading);
    font-style: italic;
    font-weight: 400;
}

.tj-rt h1 b,
.tj-rt h2 b,
.tj-rt h3 b,
.tj-rt h4 b,
.tj-rt h5 b,
.tj-rt h6 b{
    font-weight: 400;
}

.tj-rt h1 {
    font-size: 4.6875rem;
}
.tj-rt h2 { font-size: 4.00rem; }
.tj-rt h3 {font-size: 2.25rem;}
.tj-rt h4 {font-size: 1.75rem;}
.tj-rt h5 {font-size: 1.35rem;}
.tj-rt h6 {font-size: 1.12rem;}

/* Inline elements */
.tj-rt b{ font-weight: 500; }
.tj-rt strong { font-weight: 600; }
.tj-rt i,
.tj-rt em { font-style: italic; }
.tj-rt a {
    color: var(--tj-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tj-rt a:hover {
    text-decoration: none;
}


.tj-rt ol { list-style: decimal; }

/* Lists */
.tj-rt ul, .tj-rt ol {
    margin: 0 1rem 0;
    padding: 0;
}

.tj-rt ul {
    position: relative;
    width: auto;
    max-width: 72.12rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.93rem;
    padding: 0;
    list-style: none;
}
.tj-rt ul li {
    margin: 0;
    position: relative;
    padding-left: 1.55rem;
}

.tj-rt ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 1.5em;
    color: var( --tj-link);
    line-height: 0;
    font-weight: bold;
    top: 0.45em;
}

/* Definition lists */
.tj-rt dl { margin: 0 0 1rem; }
.tj-rt dt { font-weight: 600; }
.tj-rt dd { margin: 0 0 0.5rem 1.25rem; }

/* Quotes */
.tj-rt blockquote {
    margin: 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid rgba(76,76,76,0.25);
    background: rgba(0,0,0,0.02);
}

/* Code */
.tj-rt code, .tj-rt pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95em;
}
.tj-rt code {
    background: rgba(0,0,0,0.04);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}
.tj-rt pre {
    background: rgba(0,0,0,0.04);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    overflow: auto;
    margin: 0;
}
.tj-rt pre code { background: transparent; padding: 0; }

/* Tables */
.tj-rt table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.tj-rt th, .tj-rt td {
    border: 1px solid rgba(76,76,76,0.2);
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.tj-rt th {
    font-weight: 600;
    background: rgba(0,0,0,0.03);
}

/* Media */
.tj-rt img, .tj-rt video, .tj-rt iframe {
    max-width: 100%;
    height: auto;
}

/* Horizontal rule */
.tj-rt hr {
    border: 0;
    border-top: 1px solid rgba(76,76,76,0.2);
    margin: 1px 0;
    display: block;
}

/* Small text & captions */
.tj-rt small { font-size: 0.88em; }

/* ------------------ Responsive (mirrors existing breakpoints) ------------------ */
@media (max-width: 1269px) {
    .tj-rt {/* font-size: 1.31rem; */} /* keep */
    .tj-rt h1 {font-size: 4rem;}
    .tj-rt h2 {font-size: 3.5rem;}
}
@media (max-width: 1023px) {
    .tj-rt h1 {font-size: 3.5rem;}
    .tj-rt h2 {font-size: 2.8rem;}
    .tj-rt h3 {font-size: 2rem;}
}
@media (max-width: 767px) {
    .tj-rt { font-size: 1.1rem; }
    .tj-rt h1 {font-size: 3rem;}
    .tj-rt h2 {font-size: 2.35rem;}
    .tj-rt h3 {font-size: 1.75rem;}
    .tj-rt h4 {font-size: 1.25rem;}
    .tj-rt h5 {font-size: 1.1rem;}
    .tj-rt h6 {font-size: 1rem;}
}
@media (max-width: 479px) {
    .tj-rt h1 {font-size: 2.5rem;}
    .tj-rt h2 {font-size: 2rem;}
    .tj-rt h3 {font-size: 1.55rem;}
    .tj-text-section__container{
        padding-right: 0;
    }

}
@media (max-width: 319px) {
    .tj-rt { font-size: 1.06rem; }
    .tj-rt h1 { font-size: 2.3rem; }
}

.tj-rt--compact { font-size: 1.12rem; }
@media (max-width: 767px) {
    .tj-rt--compact { font-size: 1rem; }
}