.twss-page {
    color: var(--ardswc246-text-dark);
    font-size: 1rem;
    line-height: 1.8;
}

.step-flow {
    --step-flow-primary: var(--ardswc246-blue);
    --step-flow-heading: var(--ardswc246-blue-dark);
    --step-flow-text: var(--ardswc246-text-dark);
    --step-flow-connector: var(--ardswc246-blue-light);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    list-style: none;
    counter-reset: cycle;
}

.step-flow__item {
    position: relative;
    min-height: 9rem;
    border: 1px solid var(--ardswc246-blue-light);
    border-radius: 1rem;
    background: var(--fit-white);
    text-align: center;
    box-shadow: 0 .5rem 1.25rem rgba(var(--ardswc246-blue-dark-rgb), .07);
    counter-increment: cycle;
}

.step-flow__item::before {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--step-flow-primary);
    color: var(--fit-white);
    content: counter(cycle);
    font-size: 1.2rem;
    font-weight: 700;
    place-items: center;
}

.step-flow__item:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -.9rem;
    width: 1.7rem;
    height: 1.7rem;
    border-top: .3rem solid var(--step-flow-connector);
    border-right: .3rem solid var(--step-flow-connector);
    background: var(--fit-white);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.step-flow__item strong { display: block; color: var(--step-flow-heading); font-size: 1.125rem; }
.step-flow__item span { color: var(--step-flow-text); }

.twss-measures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.twss-measure {
    overflow: hidden;
    border: 1px solid var(--fit-black-light);
    border-radius: 1rem;
    background: var(--fit-white);
    box-shadow: 0 .6rem 1.5rem rgba(var(--ardswc246-blue-dark-rgb), .07);
}

.twss-measure__heading {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--ardswc246-blue-dark);
    color: var(--fit-white);
    font-size: 1.15rem;
}

.twss-measure--nonstructural .twss-measure__heading { background: var(--fit-green-dark); }

.twss-measure__heading i { font-size: 1.45rem; }

.twss-measure__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.twss-measure__item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border-radius: .75rem;
    background: var(--fit-light);
}

.twss-measure__item i { color: var(--ardswc246-blue); font-size: 1.25rem; }
.twss-measure--nonstructural .twss-measure__item i { color: var(--fit-green-dark); }

.twss-key-message {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: .35rem solid var(--ardswc246-blue);
    border-radius: .75rem;
    background: var(--ardswc246-blue-cbs);
    color: var(--ardswc246-blue-dark);
    font-weight: 700;
}

.twss-key-message i { flex: 0 0 auto; font-size: 1.6rem; }

.twss-figure {
    border: 1px solid var(--fit-black-light);
    border-radius: 1rem;
    background: var(--fit-white);
}

.twss-figure__link {
    position: relative;
    display: block;
    cursor: zoom-in;
}

.twss-figure__link img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .65rem;
}

.twss-figure__zoom {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    border-radius: 2rem;
    background: rgba(var(--ardswc246-blue-dark-rgb), .92);
    color: var(--fit-white);
    font-weight: 700;
}

.twss-figure figcaption {
    color: var(--fit-black-dark);
    text-align: center;
}

.twss-image-description {
    overflow: hidden;
    border: 1px solid var(--ardswc246-blue-light);
    border-radius: .75rem;
    background: var(--fit-white);
}

.twss-image-description summary {
    cursor: pointer;
    color: var(--ardswc246-blue-dark);
    font-weight: 700;
}

.twss-image-description summary::-webkit-details-marker { display: none; }

.twss-image-description[open] summary {
    border-bottom: 1px solid var(--ardswc246-blue-light);
    background: var(--ardswc246-blue-cbs);
}

.twss-image-description__content { background: var(--fit-white); }

.twss-image-description__chevron { transition: transform .2s ease; }

.twss-image-description[open] .twss-image-description__chevron { transform: rotate(180deg); }

.twss-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.twss-timeline::before {
    position: absolute;
    top: 2.25rem;
    right: 10%;
    left: 10%;
    height: .25rem;
    background: linear-gradient(90deg, var(--fit-green-dark), var(--ardswc246-blue), var(--fit-purple-dark));
    content: "";
}

.twss-era {
    --era-color: var(--fit-green-dark);
    --era-bg: var(--fit-green-light);
    position: relative;
}

.twss-era--landslide { --era-color: var(--ardswc246-blue); --era-bg: var(--ardswc246-blue-cbs); }
.twss-era--sediment { --era-color: var(--fit-purple-dark); --era-bg: var(--fit-purple-light); }

.twss-era__marker {
    position: absolute;
    z-index: 2;
    top: .6rem;
    left: 50%;
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    border: .35rem solid var(--fit-white);
    border-radius: 50%;
    background: var(--era-color);
    box-shadow: 0 0 0 .15rem var(--era-color);
    color: var(--fit-white);
    font-size: 1.15rem;
    font-weight: 700;
    place-items: center;
    transform: translateX(-50%);
}

.twss-era__card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--fit-black-light);
    border-top: .4rem solid var(--era-color);
    border-radius: 1rem;
    background: var(--fit-white);
    box-shadow: 0 .65rem 1.5rem rgba(var(--ardswc246-blue-dark-rgb), .08);
}

.twss-era__year { color: var(--era-color); font-size: 1.35rem; font-weight: 700; }
.twss-era__title { color: var(--ardswc246-text-dark); font-size: 1.25rem; font-weight: 700; }
.twss-era__scale { color: var(--fit-black-dark); font-weight: 700; }

.twss-era__event {
    border-radius: .7rem;
    background: var(--era-bg);
    font-weight: 700;
}

.twss-era__milestones li::marker { color: var(--era-color); }

.twss-page a:focus-visible,
.twss-image-description summary:focus-visible {
    outline: 3px solid var(--fit-yellow-dark);
    outline-offset: 3px;
}

@media (max-width: 991.98px) {
    .step-flow { grid-template-columns: repeat(2, 1fr); }
    .step-flow__item::after { display: none; }
    .twss-measure__body { grid-template-columns: 1fr; }
    .twss-timeline { grid-template-columns: 1fr; gap: 1rem; }
    .twss-timeline::before { top: 1rem; bottom: 1rem; left: 1.7rem; width: .25rem; height: auto; }
    .twss-era__marker { top: 1.25rem; left: 0; transform: none; }
}

@media (max-width: 575.98px) {
    .step-flow, .twss-measures { grid-template-columns: 1fr; }
    .twss-measure__heading { align-items: flex-start; }
    .twss-figure__zoom span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .twss-era__marker { width: 3rem; height: 3rem; font-size: 1rem; }
    .twss-timeline::before { left: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .twss-page *, .twss-page *::before, .twss-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}