/* ==========================================================================
   The area pages (/areas, /areas/<slug>) — loaded after style.css and
   built only from its tokens: the same vellum, ink and mono figures. The
   red pencil stays with the square footage; a £/sqft figure is ink, and
   the value green marks "below the London median" as it does on a card.
   ========================================================================== */

.area-page {
    max-width: 60rem;
    margin: 0 auto;
    padding: 24px var(--pad) 56px;
}

.area-crumbs {
    font-size: var(--t-small);
    color: var(--ink-soft);
    margin: 0 0 18px;
}
.area-crumbs a { color: var(--ink-soft); text-underline-offset: 2px; }
.area-crumbs a:hover { color: var(--ink); }

.area-page h1 {
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 6px 0 18px;
}

.area-page h2 {
    font-family: var(--cond);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 12px;
}

.area-page b, .area-table .num {
    font-family: var(--mono);
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums tabular-nums;
}

.area-lead {
    font-size: var(--t-lead);
    line-height: 1.55;
    max-width: 46rem;
    margin: 0 0 16px;
}

.area-hero {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 3vw, 28px);
    margin: 0 0 28px;
}

.area-figure { margin: 0 0 4px; }
.area-figure b { font-size: clamp(2.2rem, 7vw, 3.4rem); letter-spacing: -0.03em; }
.area-unit {
    font-family: var(--cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--t-small);
    color: var(--ink-soft);
    white-space: nowrap;
}

.area-vs { font-size: var(--t-lead); margin: 0 0 18px; color: var(--ink-soft); }
.area-vs.is-below, .area-table .is-below { color: var(--value); }

.area-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 14px 24px;
    margin: 0 0 20px;
}
.area-facts dt {
    font-family: var(--cond);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-soft);
}
.area-facts dd { margin: 2px 0 0; }

.area-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.area-actions .btn { text-decoration: none; }
.area-share {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule);
    cursor: pointer;
}
.area-share:hover { border-color: var(--ink-soft); }

.area-section { margin: 0 0 32px; }

.area-jump { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 26px; }
.area-jump a { color: var(--ink); font-size: var(--t-small); text-underline-offset: 2px; }

/* Tables scroll inside their own box on a phone; the page never does. */
.area-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--card);
}
.area-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-small);
}
.area-table th, .area-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--grid);
    white-space: nowrap;
}
.area-table thead th {
    font-family: var(--cond);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-soft);
    background: var(--paper);
}
.area-table tbody th { font-weight: 500; }
.area-table tbody tr:last-child th, .area-table tbody tr:last-child td { border-bottom: 0; }
.area-table .num { text-align: right; }
.area-table a { color: var(--ink); text-underline-offset: 2px; }

.area-thin { color: var(--ink-soft); }
.area-note { font-size: var(--t-small); color: var(--ink-soft); margin: 8px 0 0; }

.area-method p { line-height: 1.6; margin: 0 0 10px; max-width: 46rem; }
.area-method a { color: var(--ink); text-underline-offset: 2px; }