/* Cleverdent — reading surfaces.
 *
 * Loaded by /articole/ pages only, on top of site.css. These pages exist to be
 * read and understood, so the measure, the rhythm and the rules do the work;
 * there is nothing decorative here.
 *
 * Cached for 5 minutes like site.css — hand-edited and unhashed.
 */

.prose {
    /* 65–75 characters is the readable measure. At this size that lands
       around 38rem. */
    max-width: 38rem;
    color: #1f2937;
    font-size: 1.0625rem;
    line-height: 1.75;
}

@media (min-width: 768px) {
    .prose {
        font-size: 1.125rem;
        line-height: 1.78;
    }
}

.prose > * + * {
    margin-top: 1.4em;
}

/* More space above a heading than below it: the gap belongs to the section
   that is starting, not the one that just ended. */
.prose h2 {
    margin-top: 2.6em;
    margin-bottom: 0.6em;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #0a0a0a;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .prose h2 { font-size: 1.75rem; }
}

.prose h3 {
    margin-top: 2em;
    margin-bottom: 0.4em;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0a0a0a;
}

.prose h2 + *,
.prose h3 + * {
    margin-top: 0;
}

.prose strong { color: #0a0a0a; font-weight: 600; }

.prose a {
    color: #047857;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}
.prose a:hover { color: #065f46; text-decoration-thickness: 2px; }

.prose ul,
.prose ol { padding-left: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: #9ca3af; }
.prose li + li { margin-top: 0.5em; }

/* ---- The short answer -----------------------------------------------------
   Rules above and below rather than a coloured slab. This block is written to
   be liftable on its own: it answers the title completely. */
.answer {
    margin-top: 2em;
    padding: 1.4em 0;
    border-top: 2px solid #0a0a0a;
    border-bottom: 1px solid #e5e7eb;
}

.answer > p { margin: 0; }
.answer > p + p { margin-top: 0.9em; }

.answer-label {
    display: block;
    margin-bottom: 0.7em;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #047857;
}

/* ---- Tables --------------------------------------------------------------
   Hairlines, no zebra fill. A table on these pages is reference material, so
   it must stay scannable at a glance. */
.prose .table-wrap {
    overflow-x: auto;
    margin-top: 1.8em;
}

.prose table {
    width: 100%;
    min-width: 30rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}

.prose th,
.prose td {
    padding: 0.7em 1em 0.7em 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e5e7eb;
}

.prose thead th {
    border-bottom: 1px solid #9ca3af;
    font-weight: 700;
    color: #0a0a0a;
    white-space: nowrap;
}

.prose tbody tr:last-child td { border-bottom: none; }

/* ---- Pull quote ----------------------------------------------------------- */
.prose blockquote {
    margin-top: 1.8em;
    padding-left: 1.1em;
    border-left: 2px solid #10b981;
    font-size: 1.15em;
    line-height: 1.5;
    color: #374151;
}
.prose blockquote p { margin: 0; }

/* ---- Aside: caveats, disclosures, notes ------------------------------------ */
.note {
    margin-top: 1.8em;
    padding: 1.1em 1.25em;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f8fafc;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #4b5563;
}
.note > * + * { margin-top: 0.7em; }
.note strong { color: #0a0a0a; }

/* ---- Article FAQ ----------------------------------------------------------
   Always open. A reader who scrolled this far wants the answers, and a crawler
   should not have to guess at collapsed content. */
.qa { margin-top: 1.6em; padding-top: 1.4em; border-top: 1px solid #e5e7eb; }
.qa:first-of-type { border-top: none; }
.qa > h3 { margin-top: 0; }
.qa > p { margin-top: 0.5em; }