:root {
            --ink: #193c34;
            --muted: #646c63;
            --paper: #f8f7f1;
            --line: #d9ddd1;
            --accent: #dbe6b5
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 24px
        }

        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font: 17px/1.65 Arial, Helvetica, sans-serif
        }

        a {
            color: inherit;
            text-decoration: none
        }

        button {
            font: inherit
        }

        button,
        a,
        summary {
            -webkit-tap-highlight-color: transparent
        }

        a:focus-visible,
        button:focus-visible,
        summary:focus-visible {
            outline: 3px solid #b88b38;
            outline-offset: 5px
        }

        .wrap {
            width: min(1160px, calc(100% - 80px));
            margin: auto
        }
        header {
            border-bottom: 1px solid #cfd6c8;
            background: #eef1e7;
            position: sticky;
            top: 0;
            z-index: 100
        }

        nav {
            height: 92px;
            display: flex;
            align-items: center;
            gap: 32px
        }

        .brand {
            margin-right: auto;
            font-family: "Libre Baskerville", "Times New Roman", serif;
            font-size: 22px;
            line-height: 1.2;
            letter-spacing: 0.01em;
        }

        .brand small {
            display: block;
            font: 10px Arial, sans-serif;
            text-transform: uppercase;
            letter-spacing: 2.1px;
            margin-top: 8px
        }

        nav>a:not(.brand) {
            font-size: 13px
        }

        .button {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            background: var(--ink);
            border: 1px solid var(--ink);
            color: white;
            padding: 15px 23px;
            border-radius: 3px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: background .15s
        }

        .button:hover {
            background: #2d574a
        }

        .button.light {
            background: var(--accent);
            color: var(--ink);
            border-color: var(--accent)
        }

        .arrow {
            font-size: 20px;
            line-height: 1
        }

        .eyebrow {
            text-transform: uppercase;
            letter-spacing: 2.3px;
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 12px
        }

        .eyebrow:before {
            content: '';
            width: 24px;
            height: 1px;
            background: currentColor
        }

        h1,
        h2,
        h3,
        p {
            margin: 0
        }

        h1,
        h2,
        h3 {
            font-family: Georgia, 'Times New Roman', serif;
            font-weight: 400
        }

        h1 {
            font-size: clamp(42px, 4.55vw, 65px);
            line-height: 1.07;
            letter-spacing: -2.1px;
            margin: 25px 0
        }

        h1 em,
        h2 em {
            font-weight: 400;
            color: #64806a
        }

        h2 {
            font-size: 42px;
            line-height: 1.16;
            letter-spacing: -1.1px
        }

        h3 {
            font-size: 25px;
            line-height: 1.3
        }

        p {
            color: var(--muted)
        }

        .hero {
            padding: 64px 0 58px;
            display: grid;
            grid-template-columns: 1.12fr 1fr;
            gap: 65px;
            align-items: center
        }

        .hero-copy>p {
            max-width: 490px;
            font-size: 16px;
            line-height: 1.8
        }

        .actions {
            display: flex;
            gap: 27px;
            align-items: center;
            margin-top: 30px
        }

        .text-link {
            font-size: 13px;
            border-bottom: 1px solid var(--ink);
            padding-bottom: 4px
        }

        .fine {
            font-size: 11px !important;
            letter-spacing: .4px
        }

        .hero .fine {
            margin-top: 24px
        }

        .portrait {
            position: relative
        }

        .portrait img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 1;
            object-fit: cover;
            object-position: 50% 45%;
            border-radius: 50%;
        }



        .section {
            padding: 92px 0
        }

        .two-col {
            display: grid;
            grid-template-columns: 1fr 1.25fr;
            gap: 100px
        }

        .section .eyebrow {
            margin-bottom: 20px
        }

        .body-copy p+p {
            margin-top: 18px
        }

        .signature {
            font: italic 23px Georgia, serif;
            margin-top: 26px
        }

        .heading-row {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 40px;
            margin-bottom: 38px
        }

        .heading-row>p {
            max-width: 330px;
            font-size: 14px
        }

        /* Keep the curriculum section compact and avoid excessive empty space. */
        #subjects {
            padding: 64px 0 58px;
            border-bottom: 0;
            position: relative;
            isolation: isolate;
        }

        #subjects::before {
            content: '';
            position: absolute;
            inset: 0;
            background: #e8eddf;
            box-shadow: 0 0 0 100vmax #e8eddf;
            clip-path: inset(0 -100vmax);
            z-index: -1;
            pointer-events: none;
        }

        #subjects .heading-row {
            gap: 24px;
            margin-bottom: 44px
        }

        #subjects .subject {
            padding-top: 34px;
            padding-bottom: 22px
        }

        .subjects {
            display: grid;
            grid-template-columns: repeat(4, 1fr)
        }

        .subject {
            padding: 28px 22px 28px 0
        }

        .subject+.subject {
            padding-left: 23px;
            border-left: 1px solid var(--line)
        }

        .num {
            font-size: 10px;
            letter-spacing: 1px;
            color: #829277;
            margin-bottom: 22px;
            display: block
        }

        .subject h3 {
            font-size: 24px;
            margin-bottom: 12px
        }

        .subject p {
            font-size: 15px;
            line-height: 1.8
        }

        .method {
            display: grid;
            grid-template-columns: .85fr 1.3fr;
            gap: 100px;
            border-bottom: 0
        }

        .method-intro p {
            margin-top: 23px
        }

        #approach {
            padding-bottom: 46px;
        }

        .section.audience {
            padding-top: 46px;
        }

        .steps {
            list-style: none;
            padding: 0;
            margin: 0
        }

        .steps li {
            display: grid;
            grid-template-columns: 32px 1fr;
            gap: 20px;
            padding: 0 0 24px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--line)
        }

        .steps li:last-child {
            border: 0;
            margin: 0;
            padding: 0
        }

        .steps .num {
            margin: 5px 0
        }

        .steps h3 {
            font-size: 23px;
            margin-bottom: 8px
        }

        .steps p {
            font-size: 15px
        }

        .work-section {
            background: var(--paper)
        }

        .work-section .section {
            border-bottom: 0;
        }

        .work-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            align-items: start;
            gap: 24px
        }

        .teaching-example {
            display: block;
            width: 100%;
            height: auto;
            margin-top: 0;
        }

        .worked-examples {
            grid-template-columns: 1fr 1.1fr;
            gap: 72px;
        }

        .worked-example {
            min-width: 0;
        }

        .example-label {
            font-size: 10px;
            letter-spacing: 1.6px;
            color: var(--muted);
            margin-bottom: 12px;
        }

        .worked-example h3 {
            font-size: 27px;
            line-height: 1.3;
            margin-bottom: 18px;
        }

        .example-intro {
            font-size: 15px;
            color: var(--muted);
            margin-bottom: 26px;
        }

        .example-equation, .example-result {
            font-family: Georgia, 'Times New Roman', serif;
            font-size: clamp(18px, 1.7vw, 23px);
            line-height: 1.65;
            margin: 12px 0;
        }

        .example-equation sup, .example-result sup {
            font-size: .65em;
        }

        .equation-space {
            display: inline-block;
            margin-left: 20px;
        }

        .solution-steps {
            list-style: none;
            padding: 0;
            margin: 28px 0;
        }

        .solution-steps li + li {
            margin-top: 24px;
        }

        .solution-label {
            font: 12px Arial, sans-serif;
            color: var(--muted);
        }

        .fraction {
            display: inline-flex;
            flex-direction: column;
            vertical-align: middle;
            text-align: center;
            line-height: 1.25;
            margin: 0 3px;
        }

        .fraction > span:first-child {
            border-bottom: 1px solid currentColor;
            padding: 0 5px 3px;
        }

        .fraction > span:last-child {
            padding: 3px 5px 0;
        }

        .example-result {
            color: #557353;
        }

        .worked-examples .sample-stack {
            gap: 48px;
        }

        .algebra-layout {
            display: grid;
            grid-template-columns: 1fr 160px;
            gap: 12px;
            align-items: center;
        }

        .vector-layout {
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 18px;
            align-items: center;
        }

        .example-diagram {
            display: block;
            width: 100%;
            height: auto;
            color: #64806a;
        }

        @media(max-width:900px) {
            .worked-examples {
                gap: 40px;
            }
            .algebra-layout, .vector-layout {
                grid-template-columns: 1fr;
            }
            .example-diagram {
                max-width: 170px;
            }
        }

        .work-card {
            background: #fdfdf8;
            border: 1px solid #d8decf;
            padding: 28px
        }

        .tag {
            display: inline-block;
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 1.6px;
            border: 1px solid #cbd3bf;
            padding: 5px 8px;
            margin-bottom: 22px
        }

        .work-card h3 {
            font-size: 24px
        }

        .work-card p {
            font-size: 13px;
            margin-top: 12px
        }

        .math-sheet {
            padding: 30px 5px 8px;
            font: 24px/1.8 Georgia, serif
        }

        .math-sheet small {
            font: 11px Arial, sans-serif;
            display: block;
            color: var(--muted);
            margin: 14px 0 4px
        }

        .math-answer {
            border-top: 1px solid var(--line);
            margin-top: 20px;
            padding-top: 14px;
            color: #557353
        }

        .sample-stack {
            display: grid;
            gap: 24px
        }

        .sample-stack .math-sheet {
            padding-top: 16px;
            font-size: 22px
        }

        .placeholder-note {
            margin-top: 20px;
            font-size: 11px;
            color: #65705e
        }

        .audience {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px
        }

        .audience ul {
            margin: 0;
            padding: 0;
            list-style: none
        }

        .audience li {
            padding: 16px 0;
            border-bottom: 1px solid var(--line);
            font-size: 15px
        }

        .audience li:before {
            content: '↗';
            margin-right: 18px;
            color: #7a8a64
        }

        .language {
            background: var(--ink);
            color: #f7f8ee;
            padding: 70px 0
        }

        .language .two-col {
            align-items: center
        }

        .language h2 {
            font-size: 43px
        }

        .language p {
            color: #c4d0c6;
            font-size: 15px
        }

        .language .eyebrow {
            color: #c9d7ad;
            margin-bottom: 22px
        }

        .language .translation {
            display: block;
            font: italic 28px Georgia, serif;
            color: #ccdab4;
            margin-top: 16px
        }

        .format-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px
        }

        .format-grid h3 {
            margin-bottom: 16px
        }

        .format-grid p {
            font-size: 14px
        }

        .format-icon {
            font-size: 26px;
            display: block;
            margin-bottom: 20px
        }

        .setup-placeholder {
            margin-top: 26px;
            padding: 18px;
            border: 1px dashed #bdc8b4;
            color: #7a8174;
            font-size: 11px
        }

        .testimonials {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 90px
        }

        .quote-placeholder {
            border-left: 2px solid #bdc9ac;
            padding-left: 30px
        }

        .quote-placeholder .quote {
            font: italic 26px Georgia, serif;
            color: #8a9383;
            line-height: 1.5
        }

        .quote-placeholder p {
            font-size: 12px;
            margin-top: 18px
        }

        .faq {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 100px
        }

        details {
            border-bottom: 1px solid var(--line);
            padding: 18px 0
        }

        details:first-child {
            padding-top: 0
        }

        summary {
            cursor: pointer;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 25px;
            font-size: 14px;
            font-weight: 600
        }

        summary::-webkit-details-marker {
            display: none
        }

        summary:after {
            content: '+';
            font-weight: 400;
            font-size: 22px
        }

        details[open] summary:after {
            content: '−'
        }

        details p {
            font-size: 14px;
            margin-top: 14px
        }

        .contact {
            margin: 70px auto;
            background: #e4e9d8;
            padding: 58px;
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 60px;
            align-items: center
        }

        .contact p {
            margin-top: 18px;
            font-size: 15px
        }

        .contact .eyebrow {
            margin-bottom: 18px
        }

        .contact-action {
            border-left: 1px solid #c8d0ba;
            padding-left: 50px
        }

        .contact-action .email-button {
            margin-top: 20px;
        }

        .contact-action .button {
            width: 100%
        }

        footer {
            padding: 0 0 30px;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: baseline;
            gap: 20px;
            font-size: 11px;
            color: var(--muted)
        }

        .footer-info {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: baseline;
            gap: 8px;
            text-align: center;
        }

        .footer-info span + span::before {
            content: "\00b7";
            margin-right: 8px;
        }

        .footer-top {
            justify-self: end;
        }

        @media(max-width:900px) {
            footer {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 16px;
            }

            .footer-top {
                justify-self: center;
            }
        }

        dialog {
            border: 1px solid var(--line);
            border-radius: 5px;
            padding: 32px;
            background: var(--paper);
            color: var(--ink);
            max-width: 460px;
            width: calc(100% - 40px)
        }

        dialog::backdrop {
            background: #102a2580
        }

        dialog h3 {
            margin-bottom: 16px
        }

        dialog p {
            font-size: 14px
        }

        dialog .button {
            margin-top: 24px
        }

        body:has(dialog[open]) {
            overflow: hidden
        }

        @media(min-width:1500px) {
            .hero {
                padding-top: 80px;
                padding-bottom: 70px
            }
        }

        @media(max-width:900px) {
            .wrap {
                width: calc(100% - 44px)
            }

            nav {
                gap: 20px
            }

            nav .nav-link {
                display: none
            }

            .hero {
                gap: 30px;
                grid-template-columns: 1.1fr 1fr
            }

            .portrait img {
                height: auto;
            }

            .two-col,
            .method,
            .faq,
            .testimonials {
                gap: 45px
            }

            h2 {
                font-size: 36px
            }

            .contact {
                padding: 36px;
                gap: 30px
            }

            .contact-action {
                padding-left: 30px
            }

            .subjects {
                grid-template-columns: 1fr 1fr
            }

            .subject:nth-child(3) {
                padding-left: 0;
                border-left: 0
            }

            .audience {
                gap: 40px
            }
        }

        @media(max-width:620px) {
            .wrap {
                width: calc(100% - 40px)
            }

            nav {
                height: 78px
            }

            .brand {
                font-size: 18px
            }

            .brand small {
                font-size: 8px;
                letter-spacing: 1.5px
            }

            nav .button {
                padding: 10px 12px;
                font-size: 11px
            }

            nav .button .arrow {
                display: none
            }

            .hero {
                grid-template-columns: 1fr;
                padding: 40px 0 36px;
                gap: 38px
            }

            h1 {
                font-size: 46px;
                letter-spacing: -1.5px;
                max-width: 440px
            }

            .hero-copy>p {
                font-size: 15px
            }

            .hero .fine {
                font-size: 10px !important
            }

            .actions {
                gap: 24px
            }

            .portrait {
                max-width: 440px;
                width: 100%;
                margin: auto
            }

            .portrait img {
                height: auto;
                border-radius: 50%;
            }

            .section {
                padding: 55px 0
            }

            #approach {
                padding-bottom: 27.5px;
            }

            .section.audience {
                padding-top: 27.5px;
            }

            #subjects {
                padding: 48px 0 44px
            }

            .two-col,
            .method,
            .work-grid,
            .audience,
            .format-grid,
            .testimonials,
            .faq,
            .contact {
                grid-template-columns: 1fr;
                gap: 30px
            }

            .heading-row {
                display: block
            }

            .heading-row>p {
                margin-top: 18px
            }

            .subject {
                padding-right: 14px
            }

            .subject+.subject {
                padding-left: 16px
            }

            .subject:nth-child(3) {
                padding-left: 0
            }

            .subject h3 {
                font-size: 22px
            }

            .subject p {
                font-size: 14px
            }

            h2 {
                font-size: 35px
            }

            .language {
                padding: 50px 0
            }

            .language h2 {
                font-size: 36px
            }

            .language .translation {
                font-size: 24px
            }

            .contact {
                margin: 42px auto;
                padding: 28px
            }

            .contact-action {
                border-left: 0;
                border-top: 1px solid #c8d0ba;
                padding: 25px 0 0
            }

            .work-card {
                padding: 22px
            }

            .work-card h3 {
                font-size: 23px
            }

            .math-sheet {
                font-size: 22px
            }

            footer {
                display: grid;
            }
        }

        @media(prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto
            }

            * {
                transition: none !important
            }
        }