/* l1-blog.css — shared styling for the Level 1 blog posts.
   ---------------------------------------------------------------------------
   Lifted verbatim from the existing article template so the Level 1 posts are
   visually identical to the other 153 on the site — same type, same hero, same
   self-test. The only difference is that these ten posts LINK it rather than
   each carrying its own copy, which is how the rest of the blog ended up with
   153 near-identical style blocks that can no longer be changed together.

   Generated by tools/l1-blog-build.js from blog/taps-float-valves-cold-water-plumbers.html.
   Do not edit here; edit the reference post and re-extract, or add Level 1
   specific rules to the clearly marked block at the end.
   --------------------------------------------------------------------------- */

:root {
            --navy:      #1a2744;
            --navy-deep: #0f1a30;
            --teal:      #14b8a6;
            --teal-dark: #0d9488;
            --blue:      #3b82f6;
            --amber:     #f59e0b;
            --white:     #ffffff;
            --off:       #f0f4f8;
            --text:      #1e293b;
            --mid:       #475569;
            --light:     #94a3b8;
            --border:    #e2e8f0;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: var(--text);
            background: #fff;
            overflow-x: hidden;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        /* ─── NAV ─── */
        nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            background: rgba(15,26,48,0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 14px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
        .nav-logo-icon {
            width: 36px; height: 36px;
            background: linear-gradient(135deg, var(--blue), var(--teal));
            border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1em;
        }
        .nav-logo-text {
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            font-size: 1.25em;
            color: white;
            letter-spacing: -0.5px;
        }
        .nav-links { display: flex; align-items: center; gap: 28px; }
        .nav-links a {
            color: rgba(255,255,255,0.65);
            text-decoration: none;
            font-size: 0.88em;
            font-weight: 500;
            transition: color 0.2s;
        }
        .nav-links a:hover { color: white; }
        .nav-cta {
            background: linear-gradient(135deg, var(--teal), var(--teal-dark));
            color: white !important;
            padding: 9px 20px;
            border-radius: 8px;
            font-weight: 700 !important;
            font-size: 0.88em !important;
            transition: opacity 0.2s, transform 0.15s !important;
        }
        .nav-cta:hover { opacity: 0.9 !important; transform: translateY(-1px); }
        @media (max-width: 640px) {
            .nav-links { gap: 14px; }
            .nav-links a:not(.nav-cta) { display: none; }
        }

        /* ─── ARTICLE HERO ─── */
        .article-hero {
            background: linear-gradient(160deg, #0f1a30 0%, #1a2744 50%, #1e3a5f 100%);
            padding: 140px 32px 72px;
            position: relative;
            overflow: hidden;
        }
        .article-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);
            background-size: 48px 48px;
        }
        .article-hero-inner {
            max-width: 860px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            animation: fadeUp 0.6s ease both;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 24px;
            font-size: 0.85em;
        }
        .breadcrumb a {
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            transition: color 0.2s;
        }
        .breadcrumb a:hover { color: white; }
        .breadcrumb .separator { color: rgba(255,255,255,0.3); }
        .breadcrumb .current { color: rgba(255,255,255,0.9); }

        .article-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(20,184,166,0.12);
            border: 1px solid rgba(20,184,166,0.3);
            color: #5eead4;
            font-size: 0.72em;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 6px 14px;
            border-radius: 20px;
            margin-bottom: 24px;
        }

        .article-hero h1 {
            font-family: 'Outfit', sans-serif;
            font-size: clamp(2em, 4.6vw, 3.2em);
            font-weight: 900;
            color: white;
            line-height: 1.12;
            letter-spacing: -0.02em;
            margin-bottom: 22px;
            max-width: 780px;
        }
        .article-dek {
            color: rgba(255,255,255,0.72);
            font-size: 1.15em;
            line-height: 1.7;
            max-width: 700px;
            margin-bottom: 40px;
        }

        .article-meta {
            display: flex;
            align-items: center;
            gap: 22px;
            flex-wrap: wrap;
            padding-top: 28px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .meta-author { display: flex; align-items: center; gap: 12px; }
        .author-avatar {
            width: 44px; height: 44px;
            background: linear-gradient(135deg, var(--teal), var(--blue));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 0.92em;
            font-family: 'Outfit', sans-serif;
            letter-spacing: 0.02em;
        }
        .author-info { display: flex; flex-direction: column; }
        .author-name {
            color: white;
            font-weight: 600;
            font-size: 0.92em;
        }
        .author-role {
            color: rgba(255,255,255,0.5);
            font-size: 0.78em;
        }
        .meta-divider {
            width: 1px;
            height: 38px;
            background: rgba(255,255,255,0.12);
        }
        .meta-item {
            color: rgba(255,255,255,0.5);
            font-size: 0.78em;
            line-height: 1.4;
        }
        .meta-item strong {
            color: white;
            font-weight: 600;
            display: block;
            font-size: 1em;
            margin-bottom: 1px;
        }

        /* ─── ARTICLE BODY ─── */
        .article-body {
            max-width: 720px;
            margin: 0 auto;
            padding: 64px 32px 80px;
        }
        .article-body > p:first-of-type {
            font-size: 1.18em;
            line-height: 1.65;
            color: var(--mid);
            margin-bottom: 32px;
            font-weight: 400;
        }
        .article-body p {
            font-size: 1.05em;
            line-height: 1.8;
            margin-bottom: 22px;
            color: var(--text);
        }
        .article-body h2 {
            font-family: 'Outfit', sans-serif;
            font-size: clamp(1.5em, 3vw, 1.85em);
            font-weight: 800;
            color: var(--navy);
            line-height: 1.25;
            margin: 56px 0 20px;
            letter-spacing: -0.02em;
        }
        .article-body h2::before {
            content: '';
            display: block;
            width: 48px;
            height: 3px;
            background: linear-gradient(90deg, var(--teal), var(--blue));
            border-radius: 2px;
            margin-bottom: 18px;
        }
        .article-body h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.2em;
            font-weight: 700;
            color: var(--navy);
            margin: 40px 0 14px;
        }
        .article-body h4 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.05em;
            font-weight: 700;
            color: var(--navy);
            margin: 28px 0 10px;
        }

        .article-body ul,
        .article-body ol {
            margin: 0 0 28px 0;
            padding: 0;
            list-style: none;
        }
        .article-body li {
            position: relative;
            padding-left: 30px;
            margin-bottom: 12px;
            font-size: 1.05em;
            line-height: 1.75;
            color: var(--text);
        }
        .article-body ul li::before {
            content: '';
            position: absolute;
            left: 4px;
            top: 0.72em;
            width: 8px;
            height: 8px;
            background: var(--teal);
            border-radius: 2px;
            transform: rotate(45deg);
        }
        .article-body ol { counter-reset: item; }
        .article-body ol li { counter-increment: item; padding-left: 40px; }
        .article-body ol li::before {
            content: counter(item);
            position: absolute;
            left: 0;
            top: 0.1em;
            width: 26px;
            height: 26px;
            background: linear-gradient(135deg, var(--teal), var(--blue));
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.82em;
            font-weight: 700;
            font-family: 'Outfit', sans-serif;
        }
        .article-body li > ul,
        .article-body li > ol {
            margin: 12px 0 0 0;
        }

        .article-body strong {
            color: var(--navy);
            font-weight: 700;
        }
        .article-body em { font-style: italic; }
        .article-body a {
            color: var(--teal-dark);
            text-decoration: underline;
            text-underline-offset: 3px;
            text-decoration-thickness: 1px;
            transition: color 0.2s;
        }
        .article-body a:hover { color: var(--navy); }

        /* Tables */
        .article-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 28px 0;
            font-size: 0.95em;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .article-body thead {
            background: var(--navy);
            color: white;
        }
        .article-body th {
            text-align: left;
            padding: 14px 18px;
            font-weight: 700;
            font-family: 'Outfit', sans-serif;
            font-size: 0.92em;
            letter-spacing: 0.01em;
        }
        .article-body td {
            padding: 13px 18px;
            border-top: 1px solid var(--border);
            line-height: 1.55;
            vertical-align: top;
        }
        .article-body tbody tr:hover { background: rgba(20,184,166,0.035); }

        /* Horizontal rule (used as section divider) */
        .article-body hr {
            border: none;
            height: 1px;
            background: var(--border);
            margin: 48px 0;
        }

        /* Inline code */
        .article-body code {
            background: var(--off);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.9em;
            font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
            color: var(--navy);
        }

        /* Blockquote (callout-style) */
        .article-body blockquote {
            background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%);
            border-left: 4px solid var(--teal);
            border-radius: 10px;
            padding: 20px 28px;
            margin: 32px 0;
            font-style: normal;
        }
        .article-body blockquote p { margin-bottom: 0; }

        @media (max-width: 640px) {
            .article-body table { font-size: 0.85em; }
            .article-body th,
            .article-body td { padding: 10px 12px; }
        }

        /* ─── POST NAV (next/prev) ─── */
        .post-nav {
            max-width: 720px;
            margin: 0 auto;
            padding: 8px 32px 72px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .post-nav-link {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 20px 22px;
            background: white;
            border: 1px solid var(--border);
            border-radius: 12px;
            text-decoration: none;
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
        }
        .post-nav-link:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(15,26,48,0.08);
            border-color: var(--teal);
        }
        .post-nav-prev { text-align: left; }
        .post-nav-next { text-align: right; }
        .post-nav-dir {
            font-family: 'Outfit', sans-serif;
            font-size: 0.72em;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--teal-dark);
        }
        .post-nav-title {
            font-family: 'Outfit', sans-serif;
            font-size: 1em;
            font-weight: 700;
            color: var(--navy);
            line-height: 1.35;
            letter-spacing: -0.01em;
        }
        .post-nav-end {
            background: linear-gradient(135deg, #f0fdfa 0%, #eff6f5 100%);
            border-color: rgba(20,184,166,0.3);
        }
        .post-nav-spacer { }
        @media (max-width: 640px) {
            .post-nav { grid-template-columns: 1fr; padding: 8px 20px 56px; }
            .post-nav-next { text-align: left; }
        }

        /* ─── SHARE BAR ─── */
        .share-bar {
            max-width: 720px;
            margin: 0 auto;
            padding: 24px 32px;
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            margin-top: 24px;
            margin-bottom: 32px;
        }
        .share-bar-label {
            font-family: 'Outfit', sans-serif;
            font-size: 0.92em;
            font-weight: 600;
            color: var(--navy);
            flex-shrink: 0;
        }
        .share-bar-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            flex: 1;
        }
        .share-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 16px;
            background: white;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-family: 'Outfit', sans-serif;
            font-size: 0.85em;
            font-weight: 600;
            color: var(--navy);
            text-decoration: none;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
        }
        .share-btn:hover {
            border-color: var(--teal);
            color: var(--teal-dark);
            background: #f0fdfa;
            transform: translateY(-1px);
        }
        .share-btn-icon {
            font-size: 1.1em;
            line-height: 1;
        }
        .share-btn.copied {
            background: #dcfce7;
            border-color: #16a34a;
            color: #166534;
        }
        @media (max-width: 640px) {
            .share-bar { padding: 20px; gap: 12px; }
            .share-bar-label { width: 100%; margin-bottom: 4px; }
        }

        /* ─── END-OF-ARTICLE CTA ─── */
        .article-cta {
            background: linear-gradient(135deg, var(--teal-dark), #0891b2);
            padding: 72px 32px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .article-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
            background-size: 48px 48px;
        }
        .article-cta-inner {
            max-width: 720px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        .article-cta h2 {
            font-family: 'Outfit', sans-serif;
            font-size: clamp(1.6em, 3vw, 2.2em);
            font-weight: 900;
            color: white;
            margin-bottom: 14px;
            line-height: 1.22;
            letter-spacing: -0.01em;
        }
        .article-cta p {
            color: rgba(255,255,255,0.85);
            font-size: 1.05em;
            margin-bottom: 32px;
            line-height: 1.65;
            max-width: 560px;
            margin-left: auto;
            margin-right: auto;
        }
        .cta-btn {
            background: white;
            color: var(--teal-dark);
            padding: 15px 36px;
            border-radius: 12px;
            font-weight: 800;
            font-size: 1.05em;
            text-decoration: none;
            display: inline-block;
            box-shadow: 0 8px 28px rgba(0,0,0,0.2);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .cta-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 36px rgba(0,0,0,0.25);
        }
        .cta-note {
            margin-top: 18px;
            color: rgba(255,255,255,0.6);
            font-size: 0.82em;
        }

        /* ─── FOOTER ─── */
        footer {
            background: var(--navy-deep);
            padding: 40px 32px;
            text-align: center;
        }
        .footer-logo {
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            font-size: 1.3em;
            color: white;
            margin-bottom: 12px;
        }
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .footer-links a {
            color: rgba(255,255,255,0.4);
            text-decoration: none;
            font-size: 0.82em;
            transition: color 0.2s;
        }
        .footer-links a:hover { color: rgba(255,255,255,0.8); }
        footer p {
            color: rgba(255,255,255,0.25);
            font-size: 0.78em;
        }

        /* ─── QUIZ ─── */
        .quiz-wrapper {
            background: linear-gradient(135deg, #f8fafc 0%, #eff6f5 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 32px;
            margin: 48px 0;
        }
        .quiz-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px;
            flex-wrap: wrap;
            padding-bottom: 20px;
            margin-bottom: 22px;
            border-bottom: 1px solid var(--border);
        }
        .quiz-header h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.35em;
            font-weight: 800;
            color: var(--navy);
            margin: 0 0 6px;
            letter-spacing: -0.01em;
        }
        .quiz-header h3::before { content: none; }
        .quiz-intro {
            color: var(--mid);
            font-size: 0.92em;
            margin: 0;
            line-height: 1.55;
            max-width: 460px;
        }
        .quiz-progress {
            flex-shrink: 0;
            font-family: 'Outfit', sans-serif;
            font-size: 0.88em;
            color: var(--mid);
            background: white;
            padding: 10px 16px;
            border-radius: 10px;
            border: 1px solid var(--border);
        }
        .quiz-progress strong {
            color: var(--teal-dark);
            font-size: 1.1em;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
        }
        .quiz-question {
            background: white;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 22px 24px;
            margin-bottom: 14px;
            transition: box-shadow 0.2s;
        }
        .quiz-question:hover { box-shadow: 0 4px 16px rgba(15,26,48,0.06); }
        .quiz-question:last-of-type { margin-bottom: 0; }
        .quiz-q-num {
            font-family: 'Outfit', sans-serif;
            font-size: 0.7em;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--teal);
            margin-bottom: 10px;
        }
        .quiz-q-text {
            font-size: 1.02em;
            line-height: 1.55;
            color: var(--navy);
            font-weight: 600;
            margin-bottom: 16px;
        }
        /* Level 3 questions can carry the drawing they ask about. White ground
           because the schematics are drawn on white and would otherwise float. */
        .quiz-q-image {
            display: block;
            width: 100%;
            max-width: 560px;
            height: auto;
            margin: 0 0 16px;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 8px;
        }
        .quiz-options {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .quiz-option {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            padding: 13px 18px;
            background: #f8fafc;
            border: 2px solid transparent;
            border-radius: 10px;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.98em;
            color: var(--text);
            text-align: left;
            cursor: pointer;
            transition: background 0.18s, border-color 0.18s, transform 0.12s;
        }
        .quiz-option::before { content: none !important; }
        .quiz-option:hover:not(:disabled) {
            background: #e8f4f1;
            border-color: var(--teal);
            transform: translateX(2px);
        }
        .quiz-option:active:not(:disabled) { transform: translateX(2px) scale(0.995); }
        .quiz-letter {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px; height: 28px;
            background: white;
            border: 1px solid var(--border);
            border-radius: 50%;
            font-family: 'Outfit', sans-serif;
            font-weight: 700;
            font-size: 0.82em;
            color: var(--navy);
            transition: all 0.2s;
        }
        .quiz-option:hover:not(:disabled) .quiz-letter {
            background: var(--teal);
            border-color: var(--teal);
            color: white;
        }
        .quiz-option-text { flex: 1; line-height: 1.45; }
        .quiz-option.correct {
            background: #ecfdf5;
            border-color: #10b981;
            color: #065f46;
            font-weight: 600;
        }
        .quiz-option.correct .quiz-letter {
            background: #10b981;
            border-color: #10b981;
            color: white;
        }
        .quiz-option.incorrect {
            background: #fef2f2;
            border-color: #ef4444;
            color: #991b1b;
            font-weight: 600;
        }
        .quiz-option.incorrect .quiz-letter {
            background: #ef4444;
            border-color: #ef4444;
            color: white;
        }
        .quiz-option.dimmed { opacity: 0.55; }
        .quiz-option:disabled { cursor: default; transform: none; }
        .quiz-option:disabled:hover { transform: none; background: #f8fafc; }
        .quiz-option.correct:disabled:hover { background: #ecfdf5; }
        .quiz-option.incorrect:disabled:hover { background: #fef2f2; }
        .quiz-feedback {
            margin-top: 16px;
            padding: 15px 20px;
            border-radius: 10px;
            animation: quizFade 0.3s ease;
        }
        .quiz-feedback-correct {
            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
            border-left: 3px solid #10b981;
        }
        .quiz-feedback-incorrect {
            background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
            border-left: 3px solid #ef4444;
        }
        .quiz-feedback-header {
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            font-size: 0.82em;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        .quiz-feedback-correct .quiz-feedback-header { color: #059669; }
        .quiz-feedback-incorrect .quiz-feedback-header { color: #dc2626; }
        .quiz-feedback-body {
            font-size: 0.94em;
            line-height: 1.7;
            color: var(--text);
        }
        .quiz-feedback-body p {
            font-size: 1em;
            margin-bottom: 10px;
            line-height: 1.7;
        }
        .quiz-feedback-body p:last-child { margin-bottom: 0; }
        .quiz-feedback-body strong { color: var(--navy); }
        @keyframes quizFade {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .quiz-summary {
            background: linear-gradient(135deg, var(--teal-dark), #0891b2);
            color: white;
            border-radius: 14px;
            padding: 28px 32px;
            margin-top: 20px;
            text-align: center;
            animation: quizFade 0.4s ease;
        }
        .quiz-summary-score {
            font-family: 'Outfit', sans-serif;
            font-size: 1.2em;
            font-weight: 700;
            margin-bottom: 8px;
            letter-spacing: -0.01em;
        }
        .quiz-summary-score span {
            display: inline-block;
            margin-left: 6px;
            color: white;
            font-size: 1.5em;
            font-weight: 900;
            font-variant-numeric: tabular-nums;
        }
        .quiz-summary-message {
            font-size: 0.98em;
            line-height: 1.65;
            opacity: 0.92;
            max-width: 520px;
            margin: 0 auto;
        }
        @media (max-width: 640px) {
            .quiz-wrapper { padding: 22px 18px; }
            .quiz-header { gap: 12px; }
            .quiz-question { padding: 18px 18px; }
            .quiz-option { padding: 11px 14px; font-size: 0.93em; gap: 12px; }
            .quiz-letter { width: 24px; height: 24px; font-size: 0.78em; }
        }

        /* ─── ANIMATIONS + RESPONSIVE ─── */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 640px) {
            nav { padding: 12px 20px; }
            .article-hero { padding: 110px 20px 56px; }
            .article-body { padding: 48px 20px 60px; }
            .article-cta { padding: 56px 20px; }
            .article-meta { gap: 14px; }
            .meta-divider { display: none; }
        }


/* ── RELATED POSTS ─────────────────────────────── */
.related-posts {
    margin: 48px 0 32px;
    padding: 28px 28px 24px;
    background: linear-gradient(135deg, #f0fdfa 0%, #eff6f5 100%);
    border-left: 4px solid #14b8a6;
    border-radius: 12px;
}
.related-posts-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1em;
    font-weight: 800;
    color: #0f766e;
    margin: 0 0 14px;
    letter-spacing: 0.02em;
}
.related-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}
.related-posts-list li { margin: 0; }
.related-posts-list a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
    color: #0f1a30;
    text-decoration: none;
    font-size: 0.95em;
    transition: background 0.15s, transform 0.15s;
    line-height: 1.4;
}
.related-posts-list a:hover {
    background: rgba(255,255,255,0.95);
    transform: translateX(2px);
}
.related-badge {
    flex-shrink: 0;
    font-size: 0.78em;
    color: #0d9488;
    font-weight: 600;
    white-space: nowrap;
}
.related-title {
    font-weight: 600;
    color: #1e293b;
}
@media (max-width: 640px) {
    .related-posts { padding: 22px 20px; margin: 36px 0 24px; }
    .related-posts-list a { flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 12px; }
}

    
        /* ─── ARTICLE FIGURES ─── */
        /* A FIGURE IS A FRAME, AND THE PICTURE SITS IN IT.
           width:100% stretched every picture to the full 560 column whatever
           its real size, so a 65x168 pictogram was blown up 8.6 times into a
           1444px-tall blur, and figure heights on one page ran from 374 to
           1470. 125 of the 383 photographs on the blogs were smaller than the
           column and every one of them was being upscaled.
           The picture is now scaled DOWN to fit and never up, and centred in a
           card with a floor under its height, so the page keeps one rhythm:
           measured on the power tools post, seven figures went from a spread
           of 1096px to 225px. .article-figure--diagram is left alone - it
           carries 435 SVGs, which are vector and lose nothing by filling the
           column. */
        .article-figure {
            margin: 36px auto;
            max-width: 560px;
            width: 100%;
            min-height: 260px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .article-figure img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 420px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--off);
            box-shadow: 0 4px 16px rgba(15, 26, 48, 0.06);
        }
        .article-figure figcaption { margin-top: 10px; text-align: center; }
        @media (max-width: 768px) {
            .article-figure { margin: 28px auto; }
        }

        .skip-link { position: absolute; top: -100%; left: 0; background: #1e293b; color: white; padding: 10px 20px; font-weight: 700; font-size: 0.9em; z-index: 9999; border-radius: 0 0 8px 0; text-decoration: none; }
    .skip-link:focus { top: 0; }

/* =========================================================================
   LEVEL 1 ADDITIONS — nothing above this line is ours
   ========================================================================= */

/* "The numbers you have to know" — a Level 1 post always has a handful of
   figures that are the whole difference between a pass and a fail, and burying
   them in prose wastes them. */
.l1-numbers {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #1d4ed8;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 30px 0;
}
.l1-numbers h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15em; color: #1a2744; margin: 0 0 14px;
}
.l1-numbers dl { margin: 0; display: grid; gap: 10px; }
.l1-numbers .row {
  display: flex; gap: 14px; align-items: baseline;
  padding-bottom: 10px; border-bottom: 1px solid #e2e8f0;
}
.l1-numbers .row:last-child { border-bottom: none; padding-bottom: 0; }
.l1-numbers dt {
  flex: 0 0 auto; font-weight: 800; color: #1d4ed8;
  font-variant-numeric: tabular-nums; min-width: 88px;
}
.l1-numbers dd { margin: 0; color: #475569; line-height: 1.55; }

/* "Where people go wrong" */
.l1-traps {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 30px 0;
}
.l1-traps h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15em; color: #92400e; margin: 0 0 12px;
}
.l1-traps ul { margin: 0; padding-left: 20px; }
.l1-traps li { margin: 9px 0; color: #78350f; line-height: 1.6; }
.l1-traps li strong { color: #7c2d12; }

/* the strip that sends a reader into the matching part of the course */
.l1-course-link {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 12px; padding: 18px 22px; margin: 30px 0;
}
.l1-course-link .txt { flex: 1 1 260px; }
.l1-course-link strong { display: block; color: #1a2744; margin-bottom: 3px; }
.l1-course-link span { font-size: 0.92em; color: #475569; line-height: 1.55; }
.l1-course-link a {
  background: #1d4ed8; color: #fff; text-decoration: none;
  border-radius: 10px; padding: 11px 18px; font-weight: 700; white-space: nowrap;
}
.l1-course-link a:hover { background: #1e40af; }

/* A word that has a glossary entry. Deliberately quiet: a dotted underline
   rather than a link colour, because there can be a dozen in an article and
   a dozen blue words would read as a page of links rather than as prose. */
.gloss {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #94a3b8;
  cursor: help;
}
.gloss:hover, .gloss:focus-visible {
  color: #4338ca;
  border-bottom-color: #4338ca;
  border-bottom-style: solid;
}
.gloss:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 2px; }

/* the strip inviting a reader into the full glossary */
.l1-gloss-link {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 16px 20px; margin: 26px 0;
}
.l1-gloss-link .txt { flex: 1 1 260px; }
.l1-gloss-link strong { display: block; color: #1a2744; margin-bottom: 3px; }
.l1-gloss-link span { font-size: 0.92em; color: #475569; line-height: 1.55; }
.l1-gloss-link a {
  border: 1.5px solid #cbd5e1; color: #334155; text-decoration: none;
  border-radius: 10px; padding: 10px 16px; font-weight: 700; white-space: nowrap;
}
.l1-gloss-link a:hover { border-color: #4338ca; color: #4338ca; }

/* ---- hub and spoke ----------------------------------------------------
   Previous and next within the unit. Level 1 runs in a fixed order over a
   year, so "the next one" is a real thing rather than a guess, and the pair
   keeps its grid even when one end is missing. */
.l1-prevnext {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px 0 8px;
}
.l1-prevnext .pn {
  display: block; padding: 15px 18px; border-radius: 12px;
  border: 1.5px solid #e2e8f0; background: #fff; text-decoration: none;
}
.l1-prevnext .pn:hover { border-color: #4338ca; }
.l1-prevnext .pn.empty { border: 0; background: none; }
.l1-prevnext .pn-dir {
  display: block; font-size: 0.78em; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; color: #64748b; margin-bottom: 4px;
}
.l1-prevnext .pn-title {
  display: block; font-family: 'Outfit', sans-serif; font-weight: 700;
  color: #1a2744; line-height: 1.4;
}
.l1-prevnext .pn.next { text-align: right; }

/* The step up to Level 2 on the same subject. */
.l1-deeper {
  background: #f5f3ff; border: 1px solid #ddd6fe;
  border-radius: 12px; padding: 20px 24px; margin: 30px 0;
}
.l1-deeper h2 { margin: 0 0 8px; font-size: 1.15em; color: #4c1d95; }
.l1-deeper p { margin: 0 0 12px; font-size: 0.94em; color: #5b21b6; line-height: 1.6; }
.l1-deeper ul { margin: 0; padding-left: 20px; }
.l1-deeper li { margin: 7px 0; line-height: 1.55; }
.l1-deeper a { color: #5b21b6; font-weight: 600; }

/* Back up to the pillar and the two indexes. */
.l1-hubnav {
  border-top: 1px solid #e2e8f0; margin: 34px 0 0; padding: 18px 0 0;
}
.l1-hubnav ul { margin: 0; padding-left: 20px; }
.l1-hubnav li { margin: 7px 0; font-size: 0.94em; color: #475569; line-height: 1.55; }

@media (max-width: 560px) {
  .l1-prevnext { grid-template-columns: 1fr; }
  .l1-prevnext .pn.next { text-align: left; }
  .l1-prevnext .pn.empty { display: none; }
}

/* The row for the article you are already reading. It stays in the list so
   the panel shows the whole unit and where you are in it, but it is not a
   link to the page you are on. */
.related-posts-list li.related-here {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: rgba(255,255,255,0.4);
  border-radius: 8px; font-size: 0.95em; line-height: 1.4; color: #64748b;
}
.related-here .related-title { font-weight: 800; color: #0f766e; }
.related-you { font-size: 0.85em; color: #64748b; }

/* ── the spoke index on a Level 3 hub page ────────────────────────────────
   A hub's job is to send the reader down into one of its spokes, so the list
   is a grid of cards rather than a run of links: the section name is what
   somebody scans for, and the title and the description are what makes them
   click. Generated by tools/l3-blog-build.js from the spokes that exist. */
.l1-spokes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin: 24px 0 34px;
}
.l1-spoke {
  display: block;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #0f766e;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.l1-spoke:hover {
  border-color: #0f766e;
  box-shadow: 0 6px 18px rgba(15,118,110,0.12);
  transform: translateY(-2px);
}
/* the article body underlines every link; a card is not a link in prose */
.l1-spoke, .l1-spoke:hover, .l1-spoke span { text-decoration: none; border-bottom: 0; }
.l1-spoke-sec {
  display: block;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f766e;
  margin-bottom: 6px;
}
.l1-spoke-title {
  display: block;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 6px;
}
.l1-spoke-desc {
  display: block;
  font-size: 0.88em;
  color: #64748b;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .l1-spokes { grid-template-columns: 1fr; gap: 10px; }
}

/* =========================================================================
   DIAGRAM FIGURES
   -------------------------------------------------------------------------
   The photo figures above cap at 560px, which is right for a photograph of a
   float valve. The drawn diagrams are 900px wide with 13-16px labels in them,
   so the same cap would shrink the writing to the point of being unreadable.
   These run the full width of the column instead, and carry a caption.
   ========================================================================= */
figure.article-figure--diagram {
  margin: 34px auto;
  max-width: 100%;
  width: 100%;
}
figure.article-figure--diagram img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 26, 48, 0.06);
}
figure.article-figure--diagram figcaption {
  margin-top: 10px;
  font-size: 0.86em;
  line-height: 1.5;
  color: #64748b;
  text-align: center;
}
@media (max-width: 768px) {
  figure.article-figure--diagram { margin: 26px auto; }
  figure.article-figure--diagram figcaption { font-size: 0.82em; text-align: left; }
}