@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/newsreader.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('fonts/newsreader-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('fonts/source-sans-3.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('fonts/source-sans-3-italic.woff2') format('woff2'); }
:root {
  --ink: #15343d; --rust: #a74630; --rust-dark: #82321f; --tan: #c4ac7e; --sage: #b9c0a6;
  --muted: #35464a; --line: #bdb5a3; --paper: #f5eddd; --paper-deep: #ece3d0; --petrol: #193e49;
  --font-body: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
  --torn: polygon(0 40%,2% 56%,4% 31%,6% 63%,8% 50%,10% 68%,12% 42%,14% 64%,16% 49%,18% 72%,20% 47%,22% 73%,24% 66%,26% 48%,28% 68%,30% 55%,32% 81%,34% 59%,36% 78%,38% 56%,40% 64%,42% 54%,44% 76%,46% 51%,48% 58%,50% 38%,52% 53%,54% 31%,56% 49%,58% 27%,60% 53%,62% 43%,64% 68%,66% 54%,68% 63%,70% 43%,72% 61%,74% 35%,76% 59%,78% 39%,80% 53%,82% 30%,84% 52%,86% 24%,88% 41%,90% 19%,92% 31%,94% 17%,96% 29%,98% 6%,100% 18%,100% 100%,0 100%);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper) url('images/collage/paper-grain.webp') repeat; color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; font-kerning: normal; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--rust); text-decoration: none; }
a:hover { color: var(--rust-dark); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 420; text-wrap: balance; }
p, li { text-wrap: pretty; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 5px; }
section[id] { scroll-margin-top: 1.5rem; }
.wrap { width: min(100% - 7rem, 1250px); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 1rem; padding: .75rem 1rem; background: var(--paper); z-index: 100; }
.skip-link:focus { top: 1rem; }
.site-header { position: relative; z-index: 20; }
.header-inner { display: flex; align-items: center; gap: 2rem; min-height: 98px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 43px; height: 56px; flex-shrink: 0; }
.brand-name { display: block; font: 400 clamp(1.4rem, 2.05vw, 1.9rem)/1.1 var(--font-heading); letter-spacing: -.018em; }
.founder { display: block; font: 400 .8rem/1.5 var(--font-body); margin-top: 3px; color: var(--muted); }
.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.1vw, 2rem); margin-left: auto; }
.site-nav a { color: var(--ink); font-size: .95rem; white-space: nowrap; padding-block: .75rem; }
.site-nav .nav-cta { margin-left: .4rem; padding: .55rem 1.1rem; color: #fff; background: var(--rust); border-radius: 3px 2px 4px 2px; font-weight: 600; transition: background .15s; }
.site-nav .nav-cta:hover { color: #fff; background: var(--rust-dark); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.menu-toggle { display: none; }
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-inner { min-height: 565px; display: flex; align-items: flex-start; padding-block: 65px 100px; }
.hero-copy { position: relative; width: 51%; z-index: 2; }
.hero h1 { font-size: clamp(2.9rem, 4.65vw, 4.6rem); line-height: 1.08; letter-spacing: -.018em; max-width: 10.8em; }
.hero-copy > p { text-wrap: balance; max-width: 490px; font-size: clamp(1.1rem, 1.55vw, 1.35rem); line-height: 1.5; margin-top: 20px; }
.hero-image { position: absolute; right: max(-45px, calc((100% - 1500px) / 2)); top: 0; bottom: 20px; width: 57%; z-index: 1; }
.hero-image img { width: 100%; height: 100%; object-fit: contain; object-position: right top; }
/* The hero illustration gets a torn top edge instead of a straight crop. */
.hero-image img { --torn-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpolygon points='0,10 0,7.5 10.961039261018525,12.1 20.90271098769658,10.5 34.656666907560194,3.8 50.25333143902266,3.5 64.89072532663367,4.0 75.06999450010392,8.9 94.81907212084042,4.7 106.72117866073161,11.8 128.04139491267267,11.1 142.1982410831328,16.7 151.80381593116365,15.0 164.56873665347544,5.0 175.10003574849424,7.3 194.70967841705465,5.5 211.2704805446667,11.9 225.1116486001012,10.7 234.9279052747544,3.8 246.60536854140565,12.5 261.1640685151079,7.4 277.7763727407072,9.3 290.67334369993506,14.1 308.7602713384195,6.4 325.2277795717822,10.4 345.6045670142368,13.2 358.3477579578092,16.7 368.88261307512374,8.9 387.725445159472,5.1 403.08196546565745,3.5 420.76877160060457,13.7 437.21810882421056,15.3 450.29682649123583,12.7 467.02363489360107,11.1 481.95430420051946,14.8 503.23515843692263,9.6 520.8691371080934,3.8 538.9885333850509,12.1 560.8987805981171,14.5 573.5985225153411,8.4 591.2910078218355,3.3 600,10 600,24 0,24'/%3E%3C/svg%3E"); -webkit-mask: var(--torn-top) top left / 600px 24px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 23px) no-repeat; mask: var(--torn-top) top left / 600px 24px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 23px) no-repeat; }
.landscape-border { position: absolute; inset: auto 0 0; height: 260px; background: url('images/collage/landscape-collage.webp') bottom center / 100% 260px no-repeat; pointer-events: none; z-index: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 26px; }
.button { display: inline-flex; font-family: var(--font-body); align-items: center; justify-content: center; gap: .65rem; border: 1px solid transparent; border-radius: 3px 2px 4px 2px; padding: .85rem 1.6rem; font-size: 1rem; font-weight: 600; letter-spacing: .01em; line-height: 1.4; text-align: center; min-height: 48px; transition: background .15s, color .15s; }
.button-primary { background: var(--rust); color: #fff; border-color: var(--rust); }
.button-primary:hover { background: var(--rust-dark); color: #fff; border-color: var(--rust-dark); }
.button-outline { border-color: #6d7a78; color: var(--ink); background: #f5eddd77; }
.button-outline:hover { background: var(--ink); color: #fff; }
.guidance-preview { padding-block: 40px 54px; }
.section-heading h2 { font-size: clamp(2rem, 2.9vw, 2.7rem); line-height: 1.2; letter-spacing: -.018em; }
.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }
.topic { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 24px; }
.topic + .topic { border-left: 1px solid var(--line); }
.topic-art { display: block; width: 125px; height: 140px; background-image: url('images/collage/topic-collage.webp'); background-size: 400% 100%; background-repeat: no-repeat; margin-bottom: 8px; clip-path: inset(0 8px); }
.topic-0 { background-position: 0% center; }.topic-1 { background-position: 33.333% center; }.topic-2 { background-position: 66.667% center; }.topic-3 { background-position: 100% center; }
.topic h3 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.008em; }
.topic h3 a { color: var(--ink); }
/* The whole topic card is the link target. */
.topic h3 a::after { content: ''; position: absolute; inset: 0; }
.topic-grid .topic-art { transition: transform .2s ease; }
.topic:hover .topic-art { transform: translateY(-4px) rotate(-1.5deg); }
.topic:hover h3 a { color: var(--rust); text-decoration: underline; text-underline-offset: 4px; }
.topic h3 a:focus-visible { outline: none; }.topic:has(a:focus-visible) { outline: 3px solid var(--rust); outline-offset: 6px; }
.topic p { margin-top: 9px; font-size: 1rem; line-height: 1.5; max-width: 25ch; }
.text-link { display: inline-block; font-size: 1rem; font-weight: 600; color: var(--rust); text-decoration: underline; text-underline-offset: 5px; }
.guidance-more { text-align: center; margin-top: 28px; }.guidance-more .text-link { font-size: 1.125rem; }
.membership-banner, .site-footer { background-color: var(--petrol); background-image: url('images/collage/paper-grain.webp'); background-blend-mode: multiply; color: #fffaf0; }
.membership-banner { position: relative; isolation: isolate; margin-block: 14px; }
.membership-banner::before, .membership-banner::after, .site-footer::before { content: ''; position: absolute; left: 0; right: 0; height: 18px; background: inherit; clip-path: var(--torn); }
.membership-banner::before, .site-footer::before { top: -17px; }
.membership-banner::after { bottom: -17px; transform: rotate(180deg); }
.membership-banner::before, .membership-banner::after, .site-footer::before { background-color: var(--petrol); background-image: url('images/collage/paper-grain.webp'); background-blend-mode: multiply; }
.membership-inner { padding-block: 40px; min-height: 325px; display: flex; align-items: center; }
.membership-copy { width: 58%; position: relative; z-index: 2; }
.membership-copy h2 { font-size: clamp(2rem, 3.2vw, 3rem); letter-spacing: -.012em; line-height: 1.12; }
.membership-copy > p { margin-top: 12px; font-size: 1.1rem; line-height: 1.5; max-width: 49ch; }
.membership-copy .coming-soon { display: table; color: var(--ink); background: #b9c0a6 url('images/collage/paper-grain.webp'); background-blend-mode: multiply; padding: 6px 22px; margin-top: 18px; font-size: .95rem; transform: rotate(-.4deg); }
.membership-copy .button { margin-top: 18px; }
.membership-image { position: absolute; top: -10px; bottom: -10px; right: max(2%, calc((100% - 1250px) / 2)); width: 40%; z-index: 1; }
.membership-image img { height: 100%; width: 100%; object-fit: contain; }
.membership-banner :focus-visible, .site-footer :focus-visible { outline-color: #e6c686; }
.stay-connected { padding-block: 54px 135px; position: relative; isolation: isolate; }
.stay-connected > .landscape-border { height: 260px; }
.connect-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 80px; align-items: start; position: relative; z-index: 1; }
.contact-section { position: relative; }
.contact-section::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40px; width: 1px; background: var(--line); }
.connect-grid h2 { font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1.2; letter-spacing: -.018em; }
.connect-grid section > p { color: var(--muted); margin-top: 8px; max-width: 48ch; }
.site-form { display: grid; gap: 17px; margin-top: 23px; }
.site-form[hidden] { display: none; }
.site-form label { display: grid; gap: 5px; font-size: .875rem; font-weight: 400; }
.site-form input, .site-form textarea { width: 100%; min-width: 0; font: inherit; font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--ink); background: #fffaf055; border: 1px solid #a7ada5; border-radius: 2px; padding: 8px 11px; }
.site-form input { min-height: 44px; }
.site-form textarea { resize: vertical; min-height: 110px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.site-form .button { justify-self: start; cursor: pointer; min-width: 200px; }
.signup-section .button { width: 100%; }
.site-form .button:disabled { opacity: .65; cursor: wait; }
.form-note { color: var(--muted); font-size: .8rem; line-height: 1.5; text-align: center; }
.form-status { margin-top: 16px; font-weight: 600; overflow-wrap: anywhere; }
.form-status:empty { display: none; }.form-status.error { color: #9b2424; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cf-turnstile { min-width: 0; }.cf-turnstile:empty { display: none; }
.contact-phone-link { display: inline-block; margin-top: 14px; font-size: .9rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.connect-grid noscript { grid-column: 1 / -1; }
.site-footer { position: relative; padding-block: 30px; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.footer-brand { display: flex; gap: 14px; align-items: center; }.footer-brand .brand-mark { width: 34px; height: 46px; }
.footer-name { font: 400 1.4rem/1.3 var(--font-heading); color: #fffaf0; }
.footer-domain { display: block; font-size: .8rem; color: #fffaf0; margin-top: 3px; }
.footer-row nav { display: flex; gap: 24px; flex-wrap: wrap; }.footer-row nav a { font-size: .8rem; color: #fffaf0; }
.footer-row a:hover { color: #fffaf0; text-decoration: underline; text-underline-offset: 3px; }
/* Inner pages share one header: a collage piece, a centred title, and the torn-paper landscape. */
.page-intro { position: relative; isolation: isolate; overflow: hidden; padding-block: 48px 190px; text-align: center; }
.page-intro > .landscape-border { height: 200px; background-size: 100% 200px; }
.intro-inner { position: relative; z-index: 1; max-width: 860px; }
.page-intro h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); letter-spacing: -.018em; line-height: 1.08; margin-inline: auto; }
.page-intro h1 + p, .page-intro .article-deck { text-wrap: balance; max-width: 640px; margin: 22px auto 0; font-size: 1.25rem; line-height: 1.55; color: var(--muted); }
.intro-art { display: block; width: auto; height: 150px; margin: 0 auto 22px; }
.intro-art-wide { height: auto; width: min(100%, 420px); }
.intro-icon.topic-art { width: 96px; height: 108px; margin: 0 auto 14px; }
.eyebrow { display: block; margin: 0 0 14px; color: var(--rust); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.reading-wrap { max-width: 820px; }.content-section { padding-block: 48px; }
.content-section + .content-section { border-top: 1px solid var(--line); }
.content-section h2, .launch-note h2, .about-prose h2 { font-size: 2.1rem; letter-spacing: -.012em; line-height: 1.2; margin-bottom: 18px; }
.content-section > p, .launch-note p, .about-prose p { font-size: 1.125rem; line-height: 1.75; margin-bottom: 18px; color: var(--muted); }
.reading-list { margin-top: 28px; border-top: 1px solid var(--line); }
.reading-list > a { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; border-bottom: 1px solid var(--line); gap: 24px; color: var(--ink); }
.reading-list h3 { font-size: 1.5rem; margin-bottom: 4px; }.reading-list p { font-size: 1.0625rem; color: var(--muted); }
.reading-list > a > span { color: var(--rust); font-size: 1.25rem; transition: transform .15s; }
.reading-list a:hover h3 { color: var(--rust); text-decoration: underline; text-underline-offset: 4px; }
.reading-list a:hover > span { transform: translateX(4px); }
.topic-index { display: flex; flex-wrap: wrap; gap: 22px; border-block: 1px solid var(--line); padding-block: 22px; }
.topic-index a { font-weight: 600; }.launch-note { border-block: 1px solid var(--line); padding-block: 40px; }
.about-page { display: grid; grid-template-columns: minmax(230px, 380px) 1fr; gap: 70px; max-width: 1100px; padding-block: 48px 90px; align-items: start; }
/* The portrait sits on a torn paper mat, like the collage pieces. */
.photo-frame { position: relative; margin: 0; padding: 16px; background: var(--tan) url('images/collage/paper-grain.webp'); background-blend-mode: multiply; transform: rotate(-1.2deg); clip-path: polygon(1% 1.5%, 18% 0, 36% 1%, 55% 0, 74% 1.2%, 99% 0, 100% 22%, 98.8% 47%, 100% 73%, 99% 100%, 78% 98.8%, 52% 100%, 30% 98.6%, 0 100%, 1.2% 74%, 0 49%, 1% 24%); }
.author-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transform: rotate(1.2deg) scale(1.02); clip-path: polygon(0 .8%, 30% 0, 62% .6%, 100% 0, 99.4% 35%, 100% 68%, 99.2% 100%, 64% 99.3%, 33% 100%, 0 99.4%, .6% 66%, 0 33%); }
/* Articles: the reading column, quotes, lists and related ideas. */
.container { width: min(100% - 7rem, 1250px); margin-inline: auto; }
.back-link { display: inline-flex; gap: 6px; margin-bottom: 28px; font-size: .95rem; font-weight: 600; transition: gap .15s; }
.back-link:hover { gap: 10px; }
.article-body { max-width: 700px; margin-inline: auto; padding-block: 44px 64px; }
.article-body p { font-size: 1.1875rem; line-height: 1.75; margin-bottom: 1.35em; }
.article-body h2 { font-size: 2rem; line-height: 1.2; letter-spacing: -.012em; margin: 2.2em 0 .6em; }
.article-body h3 { font-size: 1.45rem; line-height: 1.3; color: var(--rust-dark); margin: 1.8em 0 .5em; }
.article-body ul { margin: 0 0 1.6em; padding: 0; list-style: none; }
.article-body ul li { position: relative; padding-left: 28px; margin-bottom: .55em; font-size: 1.125rem; line-height: 1.65; color: var(--muted); }
.article-body ul li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; background: var(--rust); border-radius: 48% 52% 45% 55%; transform: rotate(18deg); }
.pull-quote { position: relative; margin: 2.2em 0; padding: 30px 34px; font: italic 400 1.6rem/1.45 var(--font-heading); color: var(--ink); background: var(--paper-deep) url('images/collage/paper-grain.webp'); background-blend-mode: multiply; border-left: 4px solid var(--rust); transform: rotate(-.3deg); }
.related-concepts { width: min(100% - 7rem, 1250px); margin-inline: auto; padding-block: 64px 80px; }
.related-concepts h2 { font-size: 2rem; letter-spacing: -.012em; text-align: center; margin-bottom: 30px; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.related-card { display: block; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink); }
.related-card h3 { font-size: 1.4rem; color: var(--rust-dark); margin-bottom: 6px; }
.related-card p { font-size: 1.0625rem; line-height: 1.55; color: var(--muted); }
.related-card:hover { color: var(--ink); }.related-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
/* Membership: the price panel, numbered steps, and questions. */
.join-panel { margin-block: 44px 8px; padding: 34px 38px 30px; background: var(--paper-deep) url('images/collage/paper-grain.webp'); background-blend-mode: multiply; border-top: 4px solid var(--rust); }
.join-price { font-size: 1.6rem; line-height: 1.1; letter-spacing: -.012em; }
.join-price span { font-size: 3.4rem; color: var(--rust-dark); margin-right: .1em; }
.join-list { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 10px; }
.join-list li { position: relative; padding-left: 28px; font-size: 1.125rem; line-height: 1.5; }
.join-list li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 10px; height: 10px; background: var(--rust); border-radius: 48% 52% 45% 55%; transform: rotate(18deg); }
.join-button { min-width: 260px; font-size: 1.075rem; }
.join-terms { margin-top: 14px; max-width: 60ch; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.join-terms a { text-decoration: underline; text-underline-offset: 3px; }
.opening-soon { display: none; margin-top: 18px; padding: 12px 16px; background: var(--sage) url('images/collage/paper-grain.webp'); background-blend-mode: multiply; font-weight: 600; }
.opening-soon:target { display: block; scroll-margin-top: 140px; }
.opening-soon a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.steps-list { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: step; display: grid; gap: 22px; }
.steps-list li { position: relative; padding-left: 58px; counter-increment: step; }
.steps-list li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 40px; height: 40px; display: grid; place-items: center; font: 500 1.35rem/1 var(--font-heading); color: #fffaf0; background: var(--petrol); border-radius: 46% 54% 50% 50%; }
.steps-list h3 { font-size: 1.35rem; margin-bottom: 4px; }
.steps-list p { color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
.steps-list a, .content-section > p a, .faq a, .terms a { text-decoration: underline; text-underline-offset: 3px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 18px 36px 18px 0; font: 420 1.3rem/1.3 var(--font-heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 1.6rem/1 var(--font-body); color: var(--rust); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding-bottom: 18px; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; }
.content-section > .join-terms { margin: 16px 0 0; font-size: .95rem; line-height: 1.55; }
.terms strong { color: var(--ink); }
@media (max-width: 1180px) {
  .wrap, .container, .related-concepts { width: calc(100% - 5rem); }.header-inner { gap: 1rem; }.brand-mark { width: 34px; height: 46px; }.site-nav { gap: 1rem; }
  .hero-inner { min-height: 490px; }.hero-image { width: 57%; }.hero h1 { font-size: 4.9vw; }.hero .actions { gap: .8rem; }.hero .button { padding-inline: 1.2rem; font-size: .9rem; }
  .topic { padding-inline: 16px; }.topic-art { width: 112px; height: 125px; }.topic h3 { font-size: 1.4rem; }
  .connect-grid { gap: 64px; }.contact-section::before { left: -32px; }.membership-inner { min-height: 300px; }
}
@media (max-width: 960px) {
  .header-inner { min-height: 84px; justify-content: space-between; flex-wrap: wrap; padding-block: 14px; }
  .brand { flex-shrink: 1; min-width: 0; }
  .brand > span { min-width: 0; }
  .brand-name { font-size: 1.65rem; }.js .header-inner { flex-wrap: nowrap; padding-block: 0; }
  .js .menu-toggle { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; color: var(--ink); background: transparent; border: 1px solid #6d7a78; border-radius: 2px; padding: .6rem .9rem; min-height: 44px; cursor: pointer; }
  .menu-lines, .menu-lines::before, .menu-lines::after { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; }
  .menu-lines::before, .menu-lines::after { content: ''; position: absolute; left: 0; }.menu-lines::before { top: -5px; }.menu-lines::after { top: 5px; }
  .site-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-left: 0; }
  .js .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 12px 2.5rem 20px; background: var(--paper) url('images/collage/paper-grain.webp'); box-shadow: 0 12px 20px #15343d12; }
  .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }.site-nav a { padding: 12px 0; font-size: 1rem; }
  .site-nav .nav-cta { margin: 10px 0 0; padding: 12px 16px; text-align: center; }
  .hero-inner { min-height: 440px; padding-bottom: 90px; }.hero-copy { width: 53%; }.hero-copy > p { font-size: 1rem; }.hero h1 { font-size: 5.1vw; }
  .hero .actions { align-items: flex-start; flex-direction: column; gap: 12px; }.hero-image { right: -30px; width: 55%; }
  .membership-copy { width: 60%; }.membership-copy > p { font-size: 1rem; max-width: 35ch; }.membership-image { right: 2%; width: 38%; }
  .footer-row { align-items: flex-start; }.footer-row nav { gap: 12px 20px; max-width: 350px; justify-content: flex-end; }
  .about-page { gap: 36px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 3rem); }.brand-name { font-size: 1.5rem; }.brand { gap: 8px; }.brand-mark { width: 30px; height: 40px; }.founder { font-size: .75rem; }
  .hero-inner { min-height: auto; padding-block: 32px 18px; }.hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(2.6rem, 7.8vw, 3.8rem); max-width: 11em; }.hero-copy > p { font-size: 1.1rem; max-width: 43ch; margin-top: 18px; }
  .hero .actions { flex-direction: row; gap: 10px; margin-top: 22px; }.hero .button { font-size: .875rem; }
  .hero-image { position: relative; top: auto; right: auto; bottom: auto; width: min(100%, 650px); height: auto; margin-left: auto; padding-bottom: 26px; }
  .hero-image img { width: 100%; height: auto; }.hero > .landscape-border { height: 160px; background-size: 100% 160px; }
  .guidance-preview { padding-block: 34px 44px; }.section-heading h2 { font-size: 2.1rem; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }.topic:nth-child(3) { border-left: 0; }.topic p { max-width: 26ch; }
  .membership-inner { min-height: auto; padding-block: 34px 10px; }.membership-copy { width: 100%; }.membership-copy h2 { font-size: 2.3rem; }.membership-copy > p { max-width: 42ch; }
  .membership-image { position: relative; top: auto; right: auto; bottom: auto; width: min(74%, 420px); height: auto; margin: 0 3% 0 auto; }.membership-image img { height: auto; }
  .connect-grid { grid-template-columns: 1fr; gap: 40px; }.contact-section::before { display: none; }.contact-section { border-top: 1px solid var(--line); padding-top: 32px; }
  .stay-connected { padding-block: 42px 120px; }.connect-grid h2 { font-size: 2.3rem; }.signup-section { max-width: none; }.stay-connected > .landscape-border { height: 160px; background-size: 100% 160px; }
  .footer-row { flex-direction: column; gap: 24px; }.footer-row nav { max-width: none; justify-content: flex-start; }.footer-row nav a { font-size: .875rem; }
  .page-intro { padding-block: 28px 118px; }.page-intro > .landscape-border { height: 110px; background-size: 100% 110px; }
  .page-intro h1 { font-size: 2.6rem; }.page-intro h1 + p, .page-intro .article-deck { font-size: 1.125rem; margin-top: 16px; }
  .intro-art { height: 110px; margin-bottom: 16px; }.intro-art-wide { height: auto; width: min(100%, 300px); }.intro-icon.topic-art { width: 76px; height: 86px; }
  .content-section { padding-block: 36px; }.content-section h2, .launch-note h2, .about-prose h2 { font-size: 1.75rem; }.topic-index { gap: 14px 20px; }
  .about-page { grid-template-columns: 1fr; gap: 34px; padding-block: 24px 56px; }.photo-frame { width: min(100%, 320px); margin-inline: auto; padding: 12px; }
  .container, .related-concepts { width: calc(100% - 3rem); }.article-body { padding-block: 28px 44px; }.article-body p { font-size: 1.0625rem; }
  .article-body h2 { font-size: 1.7rem; }.article-body h3 { font-size: 1.3rem; }.article-body ul li { font-size: 1.0625rem; }
  .pull-quote { font-size: 1.3rem; padding: 22px 24px; }.join-panel { padding: 26px 22px 24px; margin-top: 32px; }.join-price span { font-size: 2.8rem; }.join-button { width: 100%; min-width: 0; }}
@media (max-width: 400px) {
  .wrap, .container, .related-concepts { width: calc(100% - 2.5rem); }.brand-name { font-size: 1.18rem; }.brand-mark { width: 25px; height: 36px; }.founder { font-size: .65rem; }.brand { gap: 6px; }.js .menu-toggle { padding-inline: .65rem; }.menu-lines { display: none; }
  .hero h1 { font-size: 2.65rem; }.hero .actions { flex-direction: column; align-items: stretch; }.hero .button { width: 100%; }
  .topic { padding-inline: 10px; }.topic h3 { font-size: 1.2rem; }.topic p { font-size: .9rem; }.topic-art { width: 95px; height: 105px; }.section-heading h2 { font-size: 1.95rem; }
  .form-row { grid-template-columns: 1fr; }.site-form .button { width: 100%; }.footer-name { font-size: 1.25rem; }
}
@media (max-width: 360px) { .header-inner { gap: 10px; }.brand-name { font-size: 1.05rem; }.brand-mark { width: 21px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }