:root {
    --fg: #e4dfdd;
    --link: #e98f63;
    --accent: #dd713c;
    --line: #463a35;
    --head: #ffffff;
    --mute: #a89b94;
    --alt: #281f1b;
    --bg: #1c1512;
    --on-accent: #1c1512;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    line-height: 1.7;
    overflow-wrap: break-word;
    margin: 0;
    color: var(--fg);
    font-size: 17px;
    background: var(--bg);
    font-family: "Work Sans", Arial, sans-serif;
}

h1, h2, h3, h4 {
    line-height: 1.25;
    color: var(--head);
    font-family: "Crimson Pro", Georgia, serif;
}

a {
    color: var(--link);
}

img {
    height: auto;
    max-width: 100%;
}

pre, table {
    overflow-x: auto;
    max-width: 100%;
}

table {
    border-collapse: collapse;
    display: block;
}

blockquote {
    padding: 4px 20px;
    margin: 20px 0;
    color: var(--mute);
    border-left: 3px solid var(--accent);
}

.hidden {
    white-space: nowrap;
    height: 1px;
    overflow: hidden;
    width: 1px;
    clip: rect(0 0 0 0);
    position: absolute;
}

.nav-sub {
    flex-wrap: wrap;
    display: flex;
    gap: 16px;
    margin-top: 32px;
    justify-content: space-between;
}

.history li {
    padding: 5.6px 0;
}

.group {
    font-size: 19.2px;
    margin-top: 28px;
}

.header > .wrap {
    padding-top: 25.6px;
    display: grid;
    gap: 12.8px;
    padding-bottom: 19.2px;
    grid-template-columns: minmax(0,1fr);
}

.header {
    border-bottom: 1px dashed var(--line);
}

.logo {
    text-decoration: none;
    color: var(--head);
    font-size: 25.6px;
    font-family: "Crimson Pro", Georgia, serif;
    font-weight: 700;
}

.description {
    font-style: italic;
    margin: 4.8px 0 0;
    color: var(--mute);
}

.header .links {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px 16px;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.header .links a {
    padding: 3.2px 0;
    display: block;
    text-decoration: none;
    color: var(--fg);
    border-bottom: 1px solid var(--line);
}

.jumbo {
    padding: 40px 0;
    background: var(--alt);
    margin-bottom: 32px;
    border-bottom: 1px solid var(--line);
}

.headline {
    margin: 0;
    color: var(--head);
    font-size: 33.6px;
}

.text {
    margin: 8px 0 0;
    color: var(--mute);
    font-size: 17.6px;
    max-width: 60ch;
}

.title-x h1 {
    margin: 0 0 20px;
    color: var(--head);
    font-size: 24px;
}

.wrap {
    padding-right: 16px;
    margin: 0 auto;
    padding-left: 16px;
    box-sizing: border-box;
    max-width: 1152px;
}

.body {
    padding-top: 24px;
    padding-bottom: 40px;
}

.column {
    min-width: 0;
}

.aside {
    min-width: 0;
    margin-top: 32px;
}

.title {
    line-height: 1.25;
    margin: 0 0 6.4px;
    font-size: 24.8px;
    font-family: "Crimson Pro", Georgia, serif;
}

.title a {
    text-decoration: none;
    color: var(--head);
}

.title a:hover {
    text-decoration: underline;
    color: var(--link);
}

.meta {
    margin: 0 0 14.4px;
    color: var(--mute);
    font-size: 13.6px;
}

.meta a {
    color: var(--mute);
}

.details img {
    height: auto;
    max-width: 100%;
}

.details h2:not(.title), .dek h2 {
    margin: 20px 0 8px;
    font-size: 18.4px;
}

.details h3, .dek h3 {
    font-size: 16.32px;
}

.image-two {
    margin: 0 0 16px;
}

.image-two img {
    display: block;
    border-radius: 8px;
    height: auto;
    width: 100%;
}

.story-alt .title {
    line-height: 1.15;
    font-size: 33.6px;
}

.story-alt {
    margin-bottom: 32px;
    border-bottom: 3px solid var(--head);
    padding-bottom: 24px;
}

.story-sub {
    display: grid;
    gap: 32px;
    margin-bottom: 32px;
    grid-template-columns: minmax(0,1fr);
}

.story-sub {
    padding: 0;
    list-style: none;
    margin: 0;
}

.story-sub .story {
    padding: 20px;
    border-radius: 16px;
    height: 100%;
    background: var(--alt);
    box-sizing: border-box;
}

.widget {
    font-size: 14.72px;
    margin-bottom: 28px;
}

.heading {
    margin: 0 0 9.6px;
    color: var(--head);
    font-size: 16px;
    text-transform: none;
    font-family: "Crimson Pro", Georgia, serif;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 5.6px;
}

.list {
    padding: 0;
    list-style: none;
    margin: 0;
}

.list li, .list > div {
    padding: 4.8px 0;
    border-bottom: 1px solid var(--line);
}

.widget a {
    text-decoration: none;
    color: var(--link);
}

.widget a:hover {
    text-decoration: underline;
}

.title-sub {
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--head);
    font-size: 33.6px;
    font-family: "Crimson Pro", Georgia, serif;
}

.date {
    margin: 0 0 24px;
    color: var(--mute);
    font-size: 14.08px;
}

.date a {
    color: var(--mute);
}

.body-b img {
    height: auto;
    max-width: 100%;
}

.post {
    padding-top: 24px;
    margin-top: 40px;
    border-top: 1px solid var(--line);
}

.contents {
    padding: 16px 20px;
    border-radius: 8px;
    background: var(--alt);
    margin-bottom: 24px;
}

.contents p {
    margin: 0 0 6.4px;
}

.box {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    border: 1px solid var(--line);
}

.box p {
    margin: 0 0 6.4px;
}

.also h2 {
    font-size: 18.4px;
}

.nav-sub {
    flex-wrap: wrap;
    display: flex;
    gap: 16px;
    margin-top: 24px;
    justify-content: space-between;
}

.trail {
    margin: 0 0 16px;
    color: var(--mute);
    font-size: 13.12px;
}

.trail a {
    color: var(--mute);
}

.foot {
    padding: 32px 0;
    text-align: center;
    margin-top: 32px;
    border-top: 3px solid var(--head);
}

.foot .list {
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 6.4px 19.2px;
    margin: 0;
    justify-content: center;
}

.foot a {
    color: var(--fg);
}

.legal {
    margin: 16px 0 0;
    color: var(--mute);
    font-size: 12.8px;
}

.actions {
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 12px;
    margin: 16px 0 0;
}

.link {
    padding: 9.6px 17.6px;
    display: inline-block;
    text-decoration: none;
    border-radius: 16px;
    color: var(--on-accent);
    background: var(--accent);
    border: 2px solid var(--accent);
    font-weight: 700;
}

.link-alt {
    color: var(--accent);
    background: var(--bg);
}

.list-sub {
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 14.4px 0 0;
    font-size: 13.6px;
}

.list-sub li, .list-sub span {
    padding: 4px 10.4px;
    border-radius: 32px;
    color: var(--fg);
    background: var(--alt);
    border: 1px solid var(--line);
}

.line {
    margin: 0 0 6.4px;
    color: var(--mute);
    font-size: 12.8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.title-sub2, h2.title-sub2 {
    margin: 0 0 24px;
}

.title-sub2 h2, h2.title-sub2 {
    font-size: 30.4px;
    margin-bottom: 5.6px;
}

.title-sub2 p {
    margin: 0;
    color: var(--mute);
}

.lede {
    margin: 0 0 24px;
    max-width: 70ch;
}

.widget .box .placeholder {
    max-height: 192px;
    display: block;
    border-radius: 8px;
    height: auto;
    margin-bottom: 9.6px;
    width: 100%;
    object-fit: cover;
}

.widget .story-sub {
    align-items: center;
    display: flex;
    gap: 9.6px;
}

.widget .story-sub .placeholder {
    display: block;
    min-width: 56px;
    border-radius: 8px;
    height: 56px;
    background: var(--alt);
    width: 56px;
    object-fit: cover;
}

.widget .story-sub small {
    display: block;
    color: var(--mute);
    font-size: 12.8px;
}

.widget .chips {
    flex-wrap: wrap;
    display: flex;
    gap: 6.4px;
    margin: 0;
}

.widget .chips a {
    padding: 3.2px 10.4px;
    border-radius: 999px;
    font-size: 13.6px;
    border: 1px solid var(--line);
}

.widget .meta {
    color: var(--mute);
    font-size: 13.12px;
}

.card {
    margin: 16px 0;
    box-sizing: border-box;
    max-width: 100%;
}

.card .box-b {
    display: grid;
    gap: 9.6px;
    grid-template-columns: minmax(0,1fr);
}

.card .group-two {
    display: grid;
    min-width: 0;
    gap: 3.2px;
}

.card label {
    font-size: 13.6px;
    font-weight: 600;
}

.card input[type=text], .card input[type=tel], .card textarea {
    padding: 8px 9.6px;
    border-radius: 8px;
    color: var(--fg);
    background: var(--bg);
    font: inherit;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
}

.card button {
    padding: 10.4px 17.6px;
    border-radius: 8px;
    color: var(--on-accent);
    background: var(--accent);
    font: inherit;
    border: 0;
    cursor: pointer;
    font-weight: 700;
}

.card .hotline {
    margin: 9.6px 0 0;
    font-size: 14.4px;
}

.card .text-alt {
    margin: 0 0 9.6px;
}

.card-boxed {
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
    border-radius: 16px;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--line);
}

.card-inline {
    padding: 14.4px;
    border-radius: 16px;
    color: var(--fg);
    background: var(--alt);
}

.card-tabbed {
    padding: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    color: var(--fg);
    background: var(--bg);
    border-top: 4px solid var(--accent);
}

.card .row {
    flex-wrap: wrap;
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line);
}

.card .row input {
    opacity: 0;
    height: 1px;
    width: 1px;
    position: absolute;
}

.card .row label {
    padding: 7.2px 14.4px;
    color: var(--mute);
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.card .row input:checked + label {
    border-bottom-color: var(--accent);
    color: var(--head);
}

.card-call {
    padding: 16px;
    text-align: center;
    border-radius: 16px;
    color: var(--fg);
    background: var(--alt);
}

.card .cta-aux {
    padding: 14.4px 25.6px;
    display: inline-block;
    text-decoration: none;
    border-radius: 999px;
    color: var(--on-accent);
    font-size: 20px;
    background: var(--accent);
    font-weight: 700;
}

.card-two {
    padding: 17.6px;
    border-radius: 16px;
    color: var(--fg);
    background: var(--bg);
    border: 2px dashed var(--line);
}

.card fieldset {
    padding: 0;
    display: grid;
    min-width: 0;
    gap: 8px;
    margin: 0;
    border: 0;
}

.card legend {
    color: var(--mute);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.card details > summary {
    padding: 8px 16px;
    list-style: none;
    display: inline-block;
    margin: 4.8px 0;
    border-radius: 8px;
    color: var(--bg);
    background: var(--head);
    cursor: pointer;
}

.card-compact {
    padding: 16px;
    border-radius: 16px;
    color: var(--fg);
    background: var(--alt);
    border: 1px solid var(--line);
}

.card-fold {
    border-radius: 16px;
    color: var(--fg);
    background: var(--bg);
    overflow: hidden;
    border: 1px solid var(--line);
}

.card-fold details > summary {
    padding: 13.6px 17.6px;
    align-items: center;
    list-style: none;
    display: flex;
    margin: 0;
    border-radius: 0;
    color: var(--head);
    background: var(--alt);
    cursor: pointer;
    justify-content: space-between;
    font-weight: 700;
}

.card-fold details > summary::-webkit-details-marker {
    display: none;
}

.card-fold details > summary::after {
    line-height: 1;
    color: var(--accent);
    font-size: 20.8px;
    content: "+";
}

.card-fold details[open] > summary::after {
    content: "-";
}

.card-fold .step {
    padding: 17.6px;
    display: grid;
    gap: 9.6px;
}

.card-fold .hotline {
    padding: 0 17.6px 14.4px;
}

.faq {
    padding-top: 16px;
    margin: 32px 0;
    border-top: 1px solid var(--line);
}

.faq details {
    padding: 9.6px 0;
    border-bottom: 1px solid var(--line);
}

.faq summary {
    color: var(--head);
    cursor: pointer;
    font-weight: 700;
}

.reads {
    padding: 16px 18.4px;
    overflow-wrap: anywhere;
    margin: 0 0 32px;
    border-radius: 16px;
    background: var(--alt);
    border: 1px solid var(--line);
}

.reads p {
    margin: 0 0 8px;
}

.reads ul, .reads ol {
    margin: 0;
    padding-left: 20px;
}

.reads li {
    margin: 0 0 5.6px;
}

.reads li span {
    color: var(--mute);
    font-size: 13.6px;
}

.head .date {
    margin: 0 0 20px;
}

.logo::before {
    vertical-align: middle;
    margin-right: 8.8px;
    display: inline-block;
    height: 12px;
    transform: rotate(45deg);
    width: 12px;
    content: "";
    border: 3px solid var(--accent);
}

.link, .cta-aux, .card button, .search button {
    border-radius: 999px;
}

.details a, .body-b a {
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
}

.image-two img, .body-b img, .details img {
    border-radius: 8px;
}

.details, .body-b {
    text-align: justify;
    hyphens: auto;
}

body {
    line-height: 1.5;
}

[data-rt]::after {
    content: " · " attr(data-rt);
}

.trail {
    padding: 5.6px 11.2px;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.contents li {
    list-style: decimal inside;
}

.details blockquote, .body-b blockquote {
    font-style: italic;
    border-left-width: 1px;
}

.chips a::before, .meta a::before {
    color: var(--accent);
    content: "#";
}

.nav-sub-top {
    text-align: right;
    margin: 8px 0;
}

.single-pg-centered {
    text-align: center;
    margin: 0 auto;
    max-width: 60ch;
}

table.history td {
    padding: 6.4px 12px;
    border-bottom: 1px solid var(--line);
}

.nav-sub-more a {
    padding: 12.8px;
    text-align: center;
    display: block;
    border-radius: 16px;
    background: var(--alt);
    width: 100%;
    font-weight: 700;
}

@media (min-width: 600px) {
    .header > .wrap {
        align-items: start;
        grid-template-columns: minmax(0,2fr) minmax(0,3fr);
    }
    .body {
        align-items: flex-start;
        display: flex;
        gap: 36px;
    }
    .column {
        flex: 1 1 0;
        order: 2;
    }
    .aside {
        flex: 0 0 288px;
        margin-top: 0;
        order: 3;
    }
    .card-inline .box-b {
        align-items: end;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
    }
}

@media (min-width: 900px) {
    .story-sub {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}
