/* shared styles for every page under research/ (loaded after blogstyles.css) */

img {
    width: 100%;
}

.index a {
    font-size: 0.9rem;
    color: #0000ee;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}

.index a:hover {
    text-decoration: none;
}

.bibliography {
    font-size: 0.9rem;
    line-height: 1.45;
}

.bibliography h4 {
    font-size: 0.95rem;
    margin-top: 1.1em;
    margin-bottom: 0.3em;
}

.bibliography ul {
    margin: 0.3em 0 0.6em 1.1em;
    padding: 0;
}

.bibliography li {
    margin-bottom: -0.2em;
}

.bibliography a:hover {
    text-decoration: none;
}

.bibliography a {
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}

.bibliography i {
    display: inline;
    text-align: inherit;
    margin: 0;
    font-style: italic;
}

/* ---------- essay components (reusable) ---------- */

.lede {
    color: var(--muted);
    font-style: italic;
}

/* figures: diagrams, timelines, images */
.fig {
    margin: 2rem 0;
}

.fig img {
    margin: 0;
    border: 1px solid var(--border);
}

.fig figcaption {
    margin-top: 0.75rem;
    font-size: 12px;
    font-style: italic;
    text-align: center;
    color: var(--muted);
}

.fig-label {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.fig--small img {
    width: 60%;
    margin: 0 auto;
}

.fig-pair {
    display: grid;
    gap: 1rem;
}

.fig-pair span {
    display: block;
    margin-top: 0.3rem;
    font-size: 11px;
    color: var(--muted);
}

/* callout: one key statement, set apart */
.callout {
    margin: 1.75rem 0;
    padding-left: 1rem;
    border-left: 1px solid var(--text);
    font-size: 1.05rem;
}

/* vertical sequence: step → step → step */
.flow {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.flow li {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.flow li + li::before {
    content: "↓";
    display: block;
    margin: 0.35rem 0;
    color: var(--muted);
    letter-spacing: 0;
}

.flow .flow-mark {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--text);
}

.flow .flow-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 11px;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

/* ladder: same thing, increasing weight */
.ladder {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ladder li {
    margin: 0 0 0.6rem;
    padding: 0.15rem 0 0.15rem 0.9rem;
    border-left: 1px solid var(--border);
    font-size: 13px;
}

.ladder li:nth-child(2) { border-left-width: 2px; }
.ladder li:nth-child(3) { border-left-width: 4px; border-left-color: var(--muted); }
.ladder li:nth-child(4) { border-left-width: 6px; border-left-color: var(--text); }

.ladder li span {
    display: block;
    font-size: 12px;
    font-style: italic;
    color: var(--muted);
}

/* tree: one observation, many branches */
.tree {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.tree > li > strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tree ul {
    margin: 0 0 0 0.3rem;
    padding: 0 0 0 1rem;
    list-style: none;
    border-left: 1px solid var(--border);
}

.tree ul li {
    position: relative;
    margin: 0.2rem 0;
}

.tree ul li::before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: -1rem;
    width: 0.7rem;
    border-top: 1px solid var(--border);
}

/* timeline: date column + event */
.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--border);
}

.timeline li {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    margin: 0;
    padding: 0.35rem 0 0.35rem 0.9rem;
    font-size: 13px;
}

.timeline time {
    color: var(--muted);
    font-size: 12px;
}

.timeline .is-key {
    font-weight: bold;
}

/* breakdown: labelled analytical steps */
.breakdown {
    margin: 1.5rem 0;
}

.breakdown dt {
    margin-top: 0.9rem;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.breakdown dd {
    margin: 0.2rem 0 0;
}

/* analysis table: stacks into labelled rows on narrow screens */
.analysis-table th {
    font-weight: normal;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    vertical-align: bottom;
}

.analysis-table td {
    vertical-align: top;
}

/* checklist */
.checklist {
    margin: 0 0 1.25rem;
    padding-left: 1.4rem;
}

.checklist li {
    margin: 0.35rem 0;
}

@media (max-width: 600px) {
    .fig--small img {
        width: 80%;
    }

    .timeline li {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .analysis-table thead {
        display: none;
    }

    .analysis-table,
    .analysis-table tbody,
    .analysis-table tr,
    .analysis-table td {
        display: block;
        width: auto;
    }

    .analysis-table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--border);
    }

    .analysis-table td {
        border: 0;
        border-bottom: 1px solid var(--border);
    }

    .analysis-table tr td:last-child {
        border-bottom: 0;
    }

    .analysis-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
    }
}