/* Ash Ambirge — Ghost theme */
@font-face { font-family: 'Easy As This'; src: url('../fonts/ATP Easy As This Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Easy As This Textured'; src: url('../fonts/ATP Easy As This Bold Textured.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --ink: #1C1B1A; --violet: #3D2FD1; --paper: #FAF7F2; --body: #3D3A36;
  --chartreuse: #CCF52E; --chartreuse-hover: #BDE922; --map: #9BAAC8;
  --heading: var(--gh-font-heading, 'Inter Tight', 'Inter', sans-serif); --mono: 'Space Mono', monospace;
  --script: 'Easy As This Textured', 'Easy As This', cursive;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--gh-font-body, 'Inter', 'Helvetica Neue', sans-serif); -webkit-font-smoothing: antialiased; }
a { color: var(--violet); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: #2F23AE; }

/* Flight map background */
.flight-map { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.flight-map svg { width: 100%; height: 100%; display: block; }
.page-shell { position: relative; z-index: 1; }

/* Header */
.site-header { position: relative; z-index: 5; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 0 clamp(16px, 3vw, 40px); }
.wordmark { pointer-events: auto; display: inline-block; font-family: var(--script); font-size: clamp(72px, 11vw, 170px); line-height: 0.64; color: var(--violet); text-decoration: none; transform: rotate(-11deg); transform-origin: 0% 0%; white-space: nowrap; margin: 10px 0 0 -8px; }
.wordmark:hover { color: var(--violet); }
.site-nav { padding-top: 26px; max-width: 460px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.nav-links a { pointer-events: auto; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.nav-links a:hover { color: var(--violet); }
.nav-squiggle { width: 100%; height: 9px; overflow: visible; margin-top: 10px; }

/* Layout grid */
#page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 345px; gap: clamp(24px, 3vw, 52px); width: min(1340px, 100% - 48px); margin: 0 auto; align-items: start; position: relative; z-index: 1; }
.home-main { min-width: 0; }
.home-template .home-main .optin-card, .home-template .hero-full .optin-card { margin-top: clamp(-48px, -3vw, -12px); }
.home-template #side-rail { margin-top: clamp(-48px, -3vw, -12px); }
.content-panel { min-width: 0; background: #FFFFFF; padding: clamp(24px, 3vw, 44px) clamp(20px, 2.5vw, 36px) clamp(28px, 3vw, 44px); }

/* Sidebar */
#side-rail { position: sticky; top: 20px; padding: 0 12px 12px 0; }
#side-rail::-webkit-scrollbar { width: 6px; }
#side-rail::-webkit-scrollbar-thumb { background: #C9C4BC; }
.rail-divider { border-top: 2px solid var(--ink); margin: 10px 0 9px; }
.rail-cta { font-size: 14px; font-weight: 600; margin: 0 0 9px; line-height: 1.5; color: var(--ink); }
.rail-cta em { font-weight: 700; }

/* Opt-in card */
.optin-card { border: 2px solid var(--ink); background: var(--paper); box-shadow: 10px 10px 0 var(--violet); padding: clamp(26px, 3.4vw, 42px) clamp(26px, 4vw, 46px) clamp(28px, 3.4vw, 44px); margin: 0 0 clamp(56px, 6vw, 90px); }
.optin-headline { font-family: var(--heading); font-weight: 900; font-size: clamp(40px, 3.4vw + 14px, 66px); line-height: 1.0; letter-spacing: -0.03em; margin: 0 0 18px; text-wrap: balance; }
.optin-sub { font-size: clamp(17px, 0.8vw + 13px, 20px); line-height: 1.6; color: var(--body); margin: 0 0 22px; max-width: 54ch; text-wrap: pretty; }
.optin-sub em { font-weight: 700; }
.optin-checks { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0 0 24px; }
.optin-checks.centered { justify-content: center; }
.check-item { display: flex; align-items: center; gap: 9px; }
.check-item svg { width: 15px; height: 15px; overflow: visible; flex: none; }
.check-item span { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.optin-proof { font-size: 13.5px; font-weight: 600; color: var(--body); margin: 16px 0 0; }

/* Kit form styling (applies to placeholder; restyle your Kit embed to match) */
.kit-placeholder-form { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
.squiggle-field { flex: 1 1 260px; position: relative; }
.squiggle-field input { width: 100%; min-height: 46px; background: transparent; border: none; font-size: 18px; padding: 8px 2px 14px; color: var(--ink); border-radius: 0; outline: none; font-family: inherit; }
.squiggle-field svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 9px; overflow: visible; }
.btn-chartreuse, .btn-violet { min-height: 52px; padding: 0 30px; border: 2px solid var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); border-radius: 0; font-family: inherit; }
.btn-chartreuse { background: var(--chartreuse); color: var(--ink); }
.btn-chartreuse:hover { background: var(--chartreuse-hover); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn-violet { background: var(--violet); color: var(--paper); }
.btn-violet:hover { background: #2F23AE; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.sidebar .kit-placeholder-form, #side-rail .kit-placeholder-form { flex-direction: column; align-items: stretch; }
#side-rail .btn-chartreuse { min-height: 44px; padding: 0 20px; font-size: 12px; box-shadow: 3px 3px 0 var(--ink); }

/* Kit embed, dressed in the design */
.kit-form-slot .formkit-form { max-width: none !important; }
.kit-form-slot .formkit-fields { display: flex !important; flex-wrap: wrap; gap: 20px; align-items: flex-end; margin: 0 !important; }
.kit-form-slot .formkit-field { flex: 1 1 260px !important; margin: 0 !important; }
.kit-form-slot .formkit-input { width: 100%; min-height: 46px; background: transparent !important; border: none !important; border-radius: 0 !important; outline: none; font-size: 18px !important; font-family: inherit; color: var(--ink) !important; padding: 8px 2px 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M4 6 C 14 0, 28 11, 44 4 C 56 -1, 66 12, 82 6 C 96 2, 104 10, 122 4 C 138 -1, 148 11, 166 6 C 180 2, 192 10, 210 3 C 224 -2, 236 10, 254 5 C 268 1, 282 9, 296 3' stroke='%233D2FD1' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: bottom !important; background-size: 100% 9px !important; }
.kit-form-slot .formkit-submit { flex: none !important; margin: 0 !important; min-height: 52px; padding: 0 30px !important; border: 2px solid var(--ink) !important; background: var(--chartreuse) !important; color: var(--ink) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); border-radius: 0 !important; font-family: inherit; overflow: visible !important; }
.kit-form-slot .formkit-submit:hover { background: var(--chartreuse-hover) !important; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.kit-form-slot .formkit-submit > span { padding: 0 !important; background: none !important; }
.kit-form-slot .formkit-spinner { display: none !important; }
.kit-form-slot .formkit-alert { list-style: none; margin: 0 0 12px; padding: 0; font-size: 14.5px; font-weight: 600; border: none; background: none; }
.kit-form-slot .formkit-alert:empty { display: none; }
.kit-form-slot .formkit-alert-success { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); padding: 14px 16px; box-shadow: 4px 4px 0 var(--violet); }
.kit-form-slot .formkit-alert-error { color: #C0261B; }
#side-rail .formkit-fields { flex-direction: column; align-items: stretch; gap: 9px; }
#side-rail .formkit-field { flex: 0 0 auto !important; }
#side-rail .formkit-submit { min-height: 52px; padding: 0 20px !important; font-size: 12px !important; box-shadow: 3px 3px 0 var(--ink); }
.kit-footer .formkit-input { color: #FFFFFF !important; caret-color: #FFFFFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M4 6 C 14 0, 28 11, 44 4 C 56 -1, 66 12, 82 6 C 96 2, 104 10, 122 4 C 138 -1, 148 11, 166 6 C 180 2, 192 10, 210 3 C 224 -2, 236 10, 254 5 C 268 1, 282 9, 296 3' stroke='white' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; }
.kit-footer .formkit-input::placeholder { color: rgba(250,247,242,0.75) !important; opacity: 1 !important; }
.kit-footer .formkit-alert-success { box-shadow: 4px 4px 0 var(--ink); }
.newsletter-hero .formkit-submit { background: var(--violet) !important; color: var(--paper) !important; }
.newsletter-hero .formkit-submit:hover { background: #2F23AE !important; }

/* Metadata + eyebrows */
.eyebrow, .post-meta { font-family: var(--mono); font-size: 12.5px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet); }
.eyebrow { margin: 0 0 14px; }
.post-meta a { color: var(--violet); text-decoration: none; }

/* Tag swatches + tag archive */
.tag-swatch { display: inline-block; width: 9px; height: 9px; border: 1.5px solid var(--ink); background: var(--violet); vertical-align: baseline; margin-right: 5px; }
.tag-swatch-lg { width: 18px; height: 18px; border-width: 2px; margin-right: 14px; }
.post-meta a { text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.tag-hero { margin: 0 0 clamp(36px, 4vw, 56px); }
.tag-title { font-family: var(--heading); font-weight: 900; font-size: clamp(38px, 3.4vw + 14px, 64px); line-height: 1.0; letter-spacing: -0.03em; margin: 10px 0 18px; }
.tag-intro { font-size: clamp(17px, 0.8vw + 13px, 20px); line-height: 1.6; color: var(--body); max-width: 54ch; margin: 0; text-wrap: pretty; }
.pagination { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 34px; }
.pagination a { text-decoration: none; }

/* Index */
.latest { margin: 0 0 clamp(56px, 6vw, 90px); }
.latest-title { display: inline-block; font-family: var(--heading); font-weight: 900; font-size: clamp(30px, 2.6vw + 14px, 44px); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); text-decoration: none; text-wrap: balance; }
.latest-title:hover { color: var(--violet); }
.latest .post-meta { margin: 12px 0 20px; }
.latest-excerpt { font-size: clamp(18px, 1vw + 13px, 21px); line-height: 1.66; margin: 0 0 1.2em; color: var(--ink); }
.keep-reading { font-size: 16px; }
.archive-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: nowrap; padding: 18px 0; border-bottom: 1px solid rgba(28,27,26,0.18); }
.archive-row > a { flex: 1 1 auto; min-width: 0; }
.archive-row .post-meta { flex: none; margin-left: auto; text-align: right; }
.archive-row:first-of-type { border-top: 1px solid rgba(28,27,26,0.18); }
.archive-row a { font-size: clamp(19px, 1vw + 13px, 22px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); text-decoration: none; }
.archive-row a:hover { color: var(--violet); }
.archive-row .post-meta { font-size: 13px; white-space: nowrap; text-transform: none; letter-spacing: 0.03em; }

/* Home archive: year columns */
.archive-years { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); column-gap: clamp(36px, 4vw, 64px); align-items: start; }
.ay-item { display: block; padding: 9px 0; font-size: 20px; font-weight: 400; line-height: 1.5; color: var(--ink); text-decoration: none; text-wrap: pretty; }
.ay-item:hover { color: var(--violet); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ay-year { break-inside: avoid; margin: 0 0 34px; padding-top: 16px; border-top: 1px solid rgba(28,27,26,0.18); }
.ay-label { font-family: var(--heading); font-weight: 900; font-size: 19px; letter-spacing: -0.01em; color: var(--violet); margin-bottom: 10px; }
.ay-more { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Post */
.post-article { width: min(680px, 100%); margin: 0 auto; }
.post-header h1 { font-family: var(--heading); font-weight: 900; font-size: clamp(46px, 5.6vw + 8px, 82px); line-height: 1.0; letter-spacing: -0.03em; margin: 0 0 26px; text-wrap: balance; }
.post-header { margin: 0 0 clamp(36px, 4vw, 56px); }
.gh-content > * { font-size: clamp(17.5px, 0.8vw + 14px, 20px); line-height: 1.68; }
.gh-content p { margin: 0 0 1.55em; text-wrap: pretty; }
.gh-content > p:first-of-type::first-letter { float: left; font-family: var(--heading); font-weight: 900; font-size: 4.4em; line-height: 0.78; padding: 4px 12px 0 0; color: var(--violet); }
.gh-content blockquote { margin: 44px 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--ink); font-weight: 600; }
.gh-content h2, .gh-content h3 { font-family: var(--heading); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin: 1.6em 0 0.6em; }
.gh-content h2 { font-size: clamp(28px, 2vw + 14px, 40px); }
.gh-content h3 { font-size: clamp(22px, 1.4vw + 13px, 30px); }
.gh-content img { max-width: 100%; height: auto; border: 2px solid var(--ink); }
.gh-content figcaption { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--body); margin-top: 10px; }
.gh-content hr { border: none; border-top: 2px solid var(--ink); margin: 48px 0; }

/* Koenig card widths */
.gh-content .kg-width-wide { width: calc(100% + min(120px, 8vw)); margin-left: calc(-1 * min(60px, 4vw)); max-width: none; }
.gh-content .kg-width-full { width: calc(100% + min(240px, 14vw)); margin-left: calc(-1 * min(120px, 7vw)); max-width: none; }
.gh-content .kg-width-wide img, .gh-content .kg-width-full img { width: 100%; }
@media (max-width: 760px) { .gh-content .kg-width-wide, .gh-content .kg-width-full { width: 100%; margin-left: 0; } }

/* Share + more */
.share-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: clamp(40px, 5vw, 64px) 0; }
.share-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet); margin-right: 6px; }
.share-row a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border: 2px solid var(--ink); background: #FFFFFF; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.share-row a:hover { background: var(--chartreuse); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.more-essays { margin-top: clamp(48px, 6vw, 80px); }
.random-post-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; min-height: 48px; padding: 0 24px; border: 2px solid var(--ink); background: #FFFFFF; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; box-shadow: 4px 4px 0 var(--ink); }
.random-post-btn:hover { background: var(--chartreuse); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.eightball { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; flex: none; }

/* Newsletter hero */
.newsletter-hero { min-height: calc(100vh - 140px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(20px, 4vh, 48px) clamp(16px, 4vw, 40px); position: relative; z-index: 1; }
.nl-wordmark { font-family: var(--script); font-size: clamp(44px, 5.4vw, 80px); line-height: 0.9; color: var(--violet); transform: rotate(-4deg); white-space: nowrap; }
.nl-headline { font-family: var(--heading); font-weight: 900; font-size: clamp(50px, 5.4vw + 16px, 104px); line-height: 0.98; letter-spacing: -0.03em; margin: clamp(12px, 2vh, 22px) 0 0; max-width: 20ch; text-wrap: balance; }
.nl-sub { font-size: clamp(16px, 0.7vw + 12px, 19px); line-height: 1.6; color: var(--body); margin: clamp(16px, 2.6vh, 28px) 0 0; max-width: 58ch; text-wrap: pretty; }
.nl-sub em { font-weight: 700; }
.newsletter-hero .optin-checks { margin: clamp(14px, 2.4vh, 26px) 0 0; }
.nl-form { width: min(560px, 100%); margin-top: clamp(20px, 3vh, 34px); }
.squiggle-under { position: relative; display: inline-block; }
.squiggle-under svg { position: absolute; left: -3%; bottom: -0.14em; width: 106%; height: 0.14em; overflow: visible; }

/* Newsletter page: no chrome */
.page-newsletter .site-header, .page-newsletter .site-footer { display: none; }
.page-newsletter .newsletter-hero { min-height: 100vh; }
.archive-year { font-family: var(--heading); font-weight: 900; font-size: clamp(44px, 4vw + 16px, 76px); letter-spacing: -0.03em; line-height: 1; color: rgba(28,27,26,0.16); margin: 64px 0 10px; scroll-margin-top: 24px; }
.archive-year:first-child { margin-top: 0; }

/* Books + Classes pages */
.cover-stack .cover-alt { opacity: 0; transition: opacity 0.25s ease; }
.cover-stack:hover .cover-alt { opacity: 1; }
.aa-btn-violet:hover { background: #2A1F9E !important; color: var(--paper); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink) !important; }
.course-card:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--violet) !important; color: var(--ink); }
.aa-script-mark:hover { color: var(--violet); }

/* Footer */
.site-footer { margin-top: clamp(80px, 10vw, 130px); background: var(--violet); padding: clamp(48px, 6vw, 76px) clamp(20px, 4vw, 48px) 42px; overflow: hidden; position: relative; z-index: 1; }
.footer-inner { max-width: 980px; margin: 0 auto; }
.footer-wordmark { font-family: var(--script); font-size: clamp(58px, 6vw + 24px, 130px); line-height: 1; color: var(--paper); transform: rotate(-5deg); display: inline-block; white-space: nowrap; }
.footer-tagline { font-family: var(--heading); font-weight: 900; font-size: clamp(18px, 1vw + 12px, 22px); letter-spacing: -0.015em; line-height: 1.2; color: var(--paper); margin: 18px 0 0; max-width: 44ch; }
.kit-footer { margin: clamp(34px, 4vw, 48px) 0 22px; }
.kit-footer input { color: var(--paper); }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; margin-top: 30px; }
.footer-links a { color: var(--paper); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.footer-links a:hover { color: var(--chartreuse); }
.footer-copy { color: rgba(250,247,242,0.7); font-size: 13px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 14px 24px; flex-wrap: wrap; margin-top: 18px; }

/* Easter eggs + paper-plane cursor */
html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 2 L22 8 L13 13 L8 22 Z' fill='%233D2FD1' stroke='%231C1B1A' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto; }
.aa-fish { position: fixed; left: 100vw; z-index: 2000; pointer-events: none; transition: transform 1.7s cubic-bezier(0.3, 0.6, 0.3, 1); }
.aa-fish-go { transform: translateX(calc(-100vw - 80px)); }
.aa-toast { position: fixed; left: 22px; bottom: 22px; z-index: 2000; background: #FFFFFF; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--violet); padding: 12px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease; max-width: 320px; }
.aa-toast-in { opacity: 1; transform: none; }
.aa-toast strong { color: var(--violet); }
html.aa-over-code, html.aa-over-code body { cursor: pointer; }
.fm-meltdown path { stroke: var(--violet) !important; opacity: 0.5 !important; transition: opacity 0.4s ease, stroke 0.4s ease; }

.aa-stamp { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: rgba(250,247,242,0.85); border: 1.5px dashed rgba(250,247,242,0.55); padding: 4px 9px; transform: rotate(-4deg); white-space: nowrap; }
.footer-wordmark { display: inline-block; }

/* 404 boarding pass */
.error-hero { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; position: relative; z-index: 1; }
.boarding-pass { border: 2px solid var(--ink); background: #FFFFFF; box-shadow: 10px 10px 0 var(--violet); padding: clamp(30px, 4vw, 52px); max-width: 560px; width: 100%; }
.bp-route svg { width: 100%; height: 60px; display: block; margin-bottom: 10px; }
.bp-headline { font-family: var(--heading); font-weight: 900; font-size: clamp(34px, 3vw + 14px, 54px); line-height: 1.0; letter-spacing: -0.03em; margin: 0 0 14px; text-wrap: balance; }
.bp-sub { font-size: clamp(16px, 0.7vw + 12px, 18px); line-height: 1.6; color: var(--body); margin: 0 0 26px; text-wrap: pretty; }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 14px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 16px 0; margin-bottom: 24px; }
.bp-grid > div { display: flex; flex-direction: column; gap: 3px; }
.bp-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--body); }
.bp-val { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--violet); }
.bp-home { font-size: 15px; }

/* Responsive */
@media (max-width: 920px) {
  #page-grid { display: block; }
  #side-rail { position: static; max-width: 440px; margin: 64px auto 0; max-height: none; overflow: visible; }
  .site-header { flex-direction: column; }
}
@media (max-width: 760px) {
  .flight-map { opacity: 0.6; }
}

.latest-item + .latest-item { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule, #e5e5e5); }
.latest-item .latest-title { font-size: clamp(24px, 1.8vw + 12px, 34px); }
.latest-item:first-child .latest-title { font-size: clamp(30px, 2.6vw + 14px, 44px); }

.hero-full { width: min(1340px, 100% - 48px); margin: 0 auto clamp(40px, 4vw, 64px); position: relative; z-index: 1; }
#side-rail .formkit-input { font-size: 13px; }


.archive-masthead { font-size: clamp(46px, 5vw + 10px, 84px); }
.year-index { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.05em; }
.year-index a { color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 1px; }
.year-index a:hover { color: var(--violet); border-bottom-color: var(--violet); }
.home-classes .course-card:hover, .course-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #3D2FD1 !important; transition: all 0.12s ease; }

/* Essays archive — Claude Design mockup */
.essays-eyebrow { font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); font-weight: 700; margin-bottom: 14px; }
.essays-masthead { font-family: var(--heading); font-weight: 900; font-size: clamp(44px, 4.6vw + 12px, 80px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 clamp(28px, 3vw, 44px); text-wrap: balance; }
.essays-masthead .violet { color: var(--violet); }
.essays-stickybar { position: sticky; top: 0; z-index: 20; background: var(--paper); margin: 0 calc(50% - 50vw) clamp(20px, 2.5vw, 32px); padding: 14px calc(50vw - 50%) 0; border-bottom: 1px solid rgba(28,27,26,0.12); }
.essays-yearnav { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 0 0 10px; }
.essays-tagnav { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0 12px; border-top: 1px solid rgba(28,27,26,0.1); }
.essays-tagnav button { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--ink); background: transparent; border: 2px solid transparent; padding: 5px 12px; cursor: pointer; }
.essays-tagnav button:hover { color: var(--violet); }
.essays-tagnav button.active { color: var(--violet); border-color: var(--ink); background: #FFFFFF; box-shadow: 3px 3px 0 var(--violet); }
.essays-yearnav a { font-family: var(--heading); font-weight: 800; font-size: clamp(17px, 0.6vw + 13px, 20px); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.essays-yearnav a:hover { color: var(--violet); }
.essay-year-section { border-top: 1px solid rgba(28,27,26,0.18); padding: clamp(28px, 3vw, 44px) 0 clamp(20px, 2.5vw, 34px); scroll-margin-top: 160px; }
.essay-year-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: clamp(20px, 2.5vw, 30px); }
.essay-year-num { font-family: var(--heading); font-weight: 900; font-size: clamp(40px, 3vw + 18px, 60px); line-height: 1; letter-spacing: -0.03em; color: var(--violet); }
.essay-count { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(28,27,26,0.45); }
.essays-cols { column-count: 2; column-gap: clamp(40px, 5vw, 90px); }
.essay-item { display: block; break-inside: avoid; font-size: clamp(18px, 0.7vw + 14px, 21px); font-weight: 400; line-height: 1.35; color: var(--ink); text-decoration: none; padding: 9px 0; text-wrap: pretty; }
.essay-item:hover { color: var(--violet); }
@media (max-width: 760px) { .essays-cols { column-count: 1; } }

/* Terrible Thoughts marquee */
.tt-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tt-track { display: flex; gap: 22px; width: max-content; animation: tt-scroll 70s linear infinite; padding: 6px 0 12px; }
.tt-viewport:hover .tt-track { animation-play-state: paused; }
.tt-card { flex: none; width: 290px; border: 2px solid var(--ink); background: #FFFFFF; box-shadow: 6px 6px 0 var(--violet); padding: 18px 20px 20px; }
.tt-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--violet); font-weight: 700; margin-bottom: 10px; }
.tt-text { font-size: 15.5px; line-height: 1.5; color: var(--ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes tt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tt-track { animation: none; flex-wrap: wrap; width: auto; } }

/* Class description template */
.class-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 4vw, 64px); align-items: start; }
.class-body { min-width: 0; }
.class-section { border-top: 1px solid rgba(28,27,26,0.18); padding: clamp(28px, 3.2vw, 44px) 0; }
.class-h2 { font-family: var(--heading); font-weight: 900; font-size: clamp(24px, 1.8vw + 12px, 36px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 18px; }
.class-p { font-size: clamp(16px, 0.8vw + 12px, 19px); line-height: 1.65; color: #3D3A36; margin: 0 0 14px; max-width: 62ch; text-wrap: pretty; }
.class-checklist { display: flex; flex-direction: column; gap: 12px; }
.class-check { position: relative; padding-left: 30px; font-size: clamp(15.5px, 0.7vw + 12px, 18px); line-height: 1.55; color: #3D3A36; max-width: 62ch; }
.class-check::before { content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M3 11 C 6 14.5, 8 15, 9.5 12.5 C 11.5 9, 14 5.5, 17.5 3.5%27 stroke=%27%233D2FD1%27 stroke-width=%273%27 fill=%27none%27 stroke-linecap=%27round%27/%3E%3C/svg%3E"); }
.class-benefits { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.class-benefit { border: 2px solid var(--ink); background: #FFFFFF; box-shadow: 5px 5px 0 var(--violet); padding: 20px 20px 18px; }
.class-benefit-title { font-family: var(--heading); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 8px; }
.class-benefit p { font-size: 14.5px; line-height: 1.5; color: #3D3A36; margin: 0; }
.class-module { border: 2px solid var(--ink); background: #FFFFFF; margin-bottom: 12px; }
.class-module summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; font-family: var(--heading); font-weight: 800; font-size: clamp(15.5px, 0.6vw + 12px, 18px); letter-spacing: -0.01em; }
.class-module summary::-webkit-details-marker { display: none; }
.class-module summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--violet); flex: none; }
.class-module[open] summary::after { content: "\2212"; }
.class-module[open] { box-shadow: 5px 5px 0 var(--violet); }
.class-module p { padding: 0 18px 16px; margin: 0; font-size: 15.5px; line-height: 1.6; color: #3D3A36; }
.class-testimonials:not(:has(.testimonial)) { display: none; }
.testimonial { border-left: 4px solid var(--violet); padding: 4px 0 4px 20px; margin-bottom: 22px; }
.testimonial p { font-size: clamp(16px, 0.8vw + 12px, 19px); line-height: 1.6; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.testimonial .who { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #3D3A36; }
.class-exam-options { display: flex; flex-direction: column; gap: 10px; max-width: 60ch; }
.class-exam-option { border: 2px solid var(--ink); background: #FFFFFF; padding: 13px 16px; font-size: 15.5px; line-height: 1.5; color: #3D3A36; display: flex; gap: 10px; }
.class-exam-option span { font-family: var(--mono); font-weight: 700; color: var(--violet); flex: none; }
.class-exam-option.correct { box-shadow: 4px 4px 0 var(--chartreuse); }
.class-rail { position: sticky; top: 20px; }
.class-rail-card { border: 2px solid var(--ink); background: #FFFFFF; box-shadow: 8px 8px 0 var(--violet); padding: 20px 20px 22px; }
.class-rail .formkit-submit { min-height: 46px; }
@media (max-width: 920px) { .class-grid { display: block; } .class-rail { position: static; max-width: 440px; margin: 40px auto 0; } }

/* Normalize imported body text (Kit/Substack/WP inline styles all override to one size) */
.gh-content p, .gh-content li, .gh-content p span, .gh-content li span {
  font-size: clamp(17.5px, 0.8vw + 14px, 20px) !important;
  font-family: inherit !important;
  line-height: 1.68 !important;
  letter-spacing: normal !important;
}
.gh-content h1, .gh-content h2, .gh-content h3 { font-family: var(--heading) !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; }
.gh-content h1 { font-size: clamp(28px, 2vw + 14px, 40px) !important; font-weight: 900; }
.gh-content h1 span, .gh-content h2 span, .gh-content h3 span { font-size: inherit !important; font-family: inherit !important; }
.gh-content blockquote p, .gh-content blockquote p span { font-size: clamp(16.5px, 0.7vw + 13px, 19px) !important; }