:root { --ink: #25343c; --paper: #f4f5f1; --paper-deep: #e6ebe7; --accent: #315d70; --highlight: #76571b; --muted: #606c70; --line: rgba(37, 52, 60, .2); --measure: 1060px; --reading: 690px; --serif: Georgia, "Times New Roman", serif; --sans: "Avenir Next", Avenir, "Segoe UI", sans-serif; }

* { box-sizing: border-box; }

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

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.72; -webkit-font-smoothing: antialiased; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }

a:hover { color: var(--accent); }

a:focus-visible, summary:focus-visible { outline: 3px solid var(--highlight); outline-offset: 4px; }

.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 30; padding: .7rem 1rem; background: var(--ink); color: var(--paper); font-family: var(--sans); }

.skip-link:focus { top: 1rem; }

.masthead { border-bottom: 1px solid var(--line); background: var(--paper); }

.masthead-inner, .footer-inner { width: 90%; max-width: var(--measure); margin-inline: auto; }

.masthead-inner { min-height: 70px; display: flex; align-items: center; gap: 25px; }

.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 600; text-decoration: none; white-space: nowrap; }

.wordmark-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font: 600 0.59rem/1 var(--sans); letter-spacing: -.06em; }

.masthead-note, .masthead nav, .eyebrow, .note-index, .note-small, .practice-number, .lesson-index, .method-mark, .footer-note, .footer-contact, .small-print, .practice-credit, .reflection span { font-family: var(--sans); }

.masthead-note { color: var(--muted); margin-right: auto; font-size: .7rem; letter-spacing: .025em; }

.masthead nav { display: flex; gap: 23px; font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; }

.masthead nav a { text-decoration: none; }

.page-shell { width: 90%; max-width: var(--measure); margin-inline: auto; }

.about-page { max-width: 900px; padding: clamp(64px, 9vw, 108px) 0 75px; }

.about-heading { max-width: 760px; padding-bottom: clamp(45px, 7vw, 76px); }

.about-heading h1 { font-size: clamp(3rem, 7vw, 5.5rem); }

.about-lead { max-width: 650px; margin: 0; color: #4b5b61; font-size: clamp(1.12rem, 1.8vw, 1.35rem); line-height: 1.6; }

.about-sections { max-width: 690px; margin-left: clamp(0px, 9vw, 105px); }

.about-sections section { padding: 30px 0 27px; border-top: 1px solid var(--line); }

.about-index { margin-bottom: 10px; color: var(--highlight); font: 0.61rem/1.5 var(--sans); letter-spacing: .09em; }

.about-sections h2 { margin: 0 0 16px; font-size: clamp(1.65rem, 3.5vw, 2.25rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.12; }

.about-sections section > p:not(.about-index) { color: #4b5b61; }

.about-return { margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line); }

.opening { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.55fr); gap: 8vw; align-items: end; padding: clamp(70px, 10vw, 126px) 0 clamp(65px, 9vw, 106px); }

.eyebrow { margin: 0 0 15px; color: var(--accent); font-size: .65rem; text-transform: uppercase; letter-spacing: .11em; }

.eyebrow-index { color: var(--muted); }

h1, h2, h3, p { margin-top: 0; }

h1 { max-width: 800px; margin-bottom: 25px; font-family: var(--serif); font-size: clamp(3.2rem, 7.5vw, 6.1rem); font-weight: 400; letter-spacing: -.055em; line-height: .98; text-wrap: balance; }

h1 span { color: var(--accent); font-style: italic; }

.opening-deck { max-width: 610px; margin-bottom: 24px; color: #4b5b61; font-size: clamp(1.12rem, 1.55vw, 1.3rem); line-height: 1.6; }

.text-link { color: var(--accent); font-family: var(--sans); font-size: .78rem; font-weight: 600; }

.opening-note { align-self: end; margin-bottom: 8px; padding: 18px 0 0 20px; border-left: 1px solid var(--accent); }

.note-index { color: var(--muted); font-size: .61rem; letter-spacing: .09em; }

.opening-note p { margin: 18px 0 14px; font-size: 1.42rem; font-style: italic; line-height: 1.28; }

.note-rule { display: block; width: 34px; border-top: 1px solid var(--highlight); margin-bottom: 11px; }

.note-small { color: var(--muted); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }

.route-map { padding: 25px 0 74px; border-top: 1px solid var(--line); }

.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 20px; }

.section-heading .eyebrow { margin-bottom: 5px; }

.section-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 400; }

.section-aside { max-width: 320px; margin: 0 0 3px; color: var(--muted); font-size: .92rem; line-height: 1.5; }

.practice-nav { border-top: 1px solid var(--line); }

.practice-card { display: grid; grid-template-columns: 105px minmax(190px, 0.9fr) minmax(220px, 1fr) 24px; align-items: center; gap: 18px; padding: 16px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }

.practice-card + .practice-card { padding-left: 4px; border-left: 0; }

.practice-card:hover .practice-arrow { transform: translate(3px, 2px); }

.practice-number { color: var(--accent); font-size: .6rem; letter-spacing: .07em; }

.practice-person { font-size: 1.28rem; letter-spacing: -.025em; }

.practice-summary { color: #526166; font-size: .88rem; line-height: 1.45; }

.practice-arrow { justify-self: end; color: var(--highlight); transition: transform .18s ease; }

.lessons { border-top: 1px solid var(--line); }

.lesson { display: grid; grid-template-columns: 95px minmax(0, var(--reading)); gap: clamp(28px, 6vw, 74px); padding: clamp(54px, 8vw, 92px) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }

.lesson-index { display: flex; align-items: center; gap: 9px; height: 23px; color: var(--highlight); font-size: .6rem; letter-spacing: .09em; }

.lesson-index span:first-child { color: var(--accent); font-size: .82rem; }

.lesson-index i { width: 22px; border-top: 1px solid currentColor; }

.lesson-body { min-width: 0; }

.lesson-body > .eyebrow { margin-bottom: 10px; }

.lesson-body > h2 { margin-bottom: 21px; font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.045em; font-weight: 400; text-wrap: balance; }

.lesson-lead { margin-bottom: 30px; color: #4b5b61; font-size: 1.14rem; line-height: 1.55; font-style: italic; }

.lesson-body > h3, .context-grid h3 { margin: 28px 0 7px; color: var(--accent); font-family: var(--sans); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }

.lesson-body > p:not(.eyebrow):not(.lesson-lead):not(.reflection), .context-grid p { color: #4b5b61; }

.try-this { margin: 30px 0; padding: 20px 0 21px; border-top: 1px solid var(--highlight); border-bottom: 1px solid var(--line); background: transparent; }

.try-this .eyebrow { margin-bottom: 6px; color: var(--highlight); }

.try-this h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 1.48rem; line-height: 1.2; letter-spacing: -.025em; font-weight: 400; }

.try-this ol { margin: 0; padding-left: 1.35rem; }

.try-this li { padding: 0 0 7px 5px; color: #39484d; }

.practice-credit { margin: 9px 0 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }

.context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding: 0 0 10px; }

.context-grid h3 { margin-top: 14px; }

.context-grid p { margin-bottom: 0; font-size: .9rem; line-height: 1.6; }

.reflection { margin: 19px 0 25px; padding-left: 15px; border-left: 1px solid var(--accent); font-size: 1.04rem; }

.reflection span { display: block; margin-bottom: 4px; color: var(--accent); font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; }

.sources { padding-top: 13px; border-top: 1px solid var(--line); font-size: .8rem; }

.sources summary { width: fit-content; color: var(--accent); cursor: pointer; font-family: var(--sans); font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; }

.sources ul { padding-left: 1.15rem; }

.sources li { margin: 8px 0; color: var(--muted); }

.sources a { color: var(--accent); }

.sources p { margin: 10px 0 0; color: var(--muted); font-size: .72rem; }

.method { display: grid; grid-template-columns: 95px minmax(0, var(--reading)); gap: clamp(28px, 6vw, 74px); padding: clamp(58px, 8vw, 90px) 0; border-bottom: 1px solid var(--line); }

.method-mark { color: var(--highlight); font-size: .6rem; line-height: 1.8; letter-spacing: .08em; }

.method-copy h2 { margin: 0 0 21px; font-family: var(--serif); font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.06; letter-spacing: -.045em; font-weight: 400; }

.method-copy p:not(.eyebrow) { color: #4b5b61; }

.response { display: grid; grid-template-columns: 1fr minmax(260px, 0.7fr); gap: 50px; align-items: start; padding: clamp(55px, 8vw, 92px) 0; }

.response h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 400; }

.response-copy > p:first-child { max-width: 430px; color: #4b5b61; }

.button-link { display: inline-flex; align-items: center; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--accent); color: var(--accent); font-family: var(--sans); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }

.button-link:hover { color: var(--highlight); border-color: var(--highlight); }

.small-print { margin: 7px 0 0; color: var(--muted); font-size: .6rem; }

.site-footer { padding: 28px 0 24px; border-top: 1px solid var(--line); background: var(--paper-deep); color: var(--ink); }

.footer-inner { display: flex; justify-content: space-between; gap: 40px; }

.site-footer .eyebrow { margin-bottom: 5px; color: var(--accent); font-size: .59rem; }

.footer-studio { font-family: var(--serif); font-size: 1.24rem; text-decoration: none; }

.footer-note { max-width: 430px; margin: 5px 0 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }

.footer-contact { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 10px; color: var(--muted); font-size: .6rem; text-align: right; }

.footer-contact a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 760px) { .masthead-inner { flex-wrap: wrap; gap: 12px; min-height: 66px; padding: 11px 0; } .masthead-note { display: none; } .masthead nav { margin-left: auto; } .opening { grid-template-columns: 1fr; gap: 34px; padding-top: 68px; } .about-sections { margin-left: 0; } .opening-note { max-width: 360px; } .section-heading { align-items: start; flex-direction: column; gap: 9px; } .section-aside { max-width: 420px; } .practice-card { grid-template-columns: 75px minmax(0, 1fr) 24px; gap: 5px 13px; padding: 14px 4px; } .practice-number { grid-column: 1; grid-row: 1; } .practice-person { grid-column: 2; grid-row: 1; } .practice-summary { grid-column: 2; grid-row: 2; } .practice-arrow { grid-column: 3; grid-row: 1 / span 2; } .lesson, .method { grid-template-columns: 1fr; gap: 14px; } .lesson-index { order: 0; } .lesson-body { order: 1; } .response { grid-template-columns: 1fr; gap: 22px; } }

@media (max-width: 500px) { body { font-size: 17px; } .masthead nav { gap: 13px; font-size: .6rem; } .wordmark { font-size: .9rem; } .opening { padding-top: 58px; } .context-grid { grid-template-columns: 1fr; gap: 1px; } .footer-inner { flex-direction: column; gap: 20px; } .footer-contact { align-items: flex-start; text-align: left; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

@media print { :root { --paper: #fff; --ink: #111; --accent: #234657; --highlight: #57400f; } body { background: white; color: black; font-size: 11pt; } .masthead, .opening-note, .practice-nav, .response, .site-footer, .skip-link { display: none !important; } .page-shell { width: 100%; } .opening { display: block; padding: 0 0 24pt; } h1 { font-size: 36pt; } .route-map { padding: 18pt 0; } .lesson, .method { display: block; padding: 25pt 0; break-inside: auto; } .lesson-index { margin-bottom: 10pt; } .lesson-body { max-width: none; } .try-this { break-inside: avoid; } .sources { break-inside: avoid; } .sources a::after { content: " (" attr(href) ")"; color: #444; font-size: 8pt; overflow-wrap: anywhere; } details:not([open]) > *:not(summary) { display: block; } a { text-decoration: none; } }

/*# sourceMappingURL=main.css.map */