:root {
  --rail-width: 48px;
  --bg: #fff;
  --surface: #fafafa;
  --text: #18181b;
  --muted: #71717a;
  --faint: #a1a1aa;
  --line: #e4e4e7;
  --strong-line: #d4d4d8;
  --accent: #18181b;
  --max: 1180px;
  color-scheme: light;
}
[data-mode="dark"][data-color="neutral"] {
  --bg: #09090b;
  --surface: #111113;
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --faint: #52525b;
  --line: #27272a;
  --strong-line: #3f3f46;
  --accent: #f4f4f5;
  color-scheme: dark;
}
[data-mode="light"][data-color="yellow"] {
  --bg: #ffd426; --surface: #f5bd05; --text: #241a00; --muted: #493800;
  --faint: #645000; --line: #ae8500; --strong-line: #755900; --accent: #a12436;
  color-scheme: light;
}
[data-mode="light"][data-color="blue"] {
  --bg: #095bea; --surface: #0648c4; --text: #fff; --muted: #e8f1ff;
  --faint: #c8dcff; --line: #4688f2; --strong-line: #9bc3ff; --accent: #ffe061;
  color-scheme: light;
}
[data-mode="light"][data-color="red"] {
  --bg: #de2d42; --surface: #bf1d34; --text: #fff; --muted: #ffe4e9;
  --faint: #ffc5ce; --line: #ef7484; --strong-line: #ffb0ba; --accent: #ffe36b;
  color-scheme: light;
}
[data-mode="light"][data-color="lime"] {
  --bg: #a9ed28; --surface: #86d30c; --text: #16230a; --muted: #294312;
  --faint: #3a5c17; --line: #589c13; --strong-line: #345f0c; --accent: #ad1543;
  color-scheme: light;
}
[data-mode="light"][data-color="orange"] {
  --bg: #f87322; --surface: #e95b0a; --text: #281204; --muted: #482008;
  --faint: #66300d; --line: #b5450b; --strong-line: #833008; --accent: #094f89;
  color-scheme: light;
}
[data-mode="dark"][data-color="yellow"] {
  --bg: #241d00; --surface: #3a2d00; --text: #fff4ad; --muted: #d2b849;
  --faint: #8e7621; --line: #5e4b0e; --strong-line: #927622; --accent: #ffd43b;
  color-scheme: dark;
}
[data-mode="dark"][data-color="blue"] {
  --bg: #061633; --surface: #082b63; --text: #e8f2ff; --muted: #86b4ee;
  --faint: #4b75b4; --line: #123d78; --strong-line: #2866ad; --accent: #1683ff;
  color-scheme: dark;
}
[data-mode="dark"][data-color="red"] {
  --bg: #260c0c; --surface: #421414; --text: #ffe9e5; --muted: #e49a91;
  --faint: #985049; --line: #642322; --strong-line: #96433d; --accent: #ff6f61;
  color-scheme: dark;
}
[data-mode="dark"][data-color="lime"] {
  --bg: #101e08; --surface: #20340e; --text: #e7ffb6; --muted: #b2d878;
  --faint: #80a450; --line: #3a581e; --strong-line: #688e36; --accent: #bbf04c;
  color-scheme: dark;
}
[data-mode="dark"][data-color="orange"] {
  --bg: #241008; --surface: #3b1c0c; --text: #ffebd4; --muted: #e5ae81;
  --faint: #b3784c; --line: #613518; --strong-line: #9d582a; --accent: #ff8c40;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; height: 56px; padding: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(8px); }
.logo-button { display: flex; width: var(--rail-width); height: 56px; align-items: center; justify-content: center; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }
.frelund-logo { fill: var(--text); }
.frelund-logo .logo-muted { fill: var(--faint); }
.brand { display: flex; align-items: center; gap: 10px; font: 600 13px Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--text); font: 700 12px Arial, sans-serif; }
.main-nav { display: flex; gap: 24px; margin-left: auto; margin-right: 24px; font: 600 10px Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.main-nav a:hover, .main-nav .is-active { color: var(--text); }
.theme-toggle, .color-toggle { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; margin-right: 4px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.color-toggle { position: relative; margin-right: 16px; }
.color-toggle::before { width: 12px; height: 12px; border: 1px solid var(--muted); border-radius: 50%; background: var(--accent); content: ''; }
.color-toggle[data-color="neutral"]::before { background: var(--text); }
.color-picker { position: fixed; top: 48px; right: 12px; z-index: 60; display: none; gap: 8px; padding: 10px; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 10px 28px rgb(0 0 0 / .18); }
.color-picker.is-open { display: flex; }
.color-picker button { width: 24px; height: 24px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.color-picker button:hover, .color-picker button.is-selected { border-color: var(--text); transform: scale(1.08); }
.color-picker [data-color-choice="neutral"] { background: #18181b; }
.color-picker [data-color-choice="yellow"] { background: #ffd426; }
.color-picker [data-color-choice="blue"] { background: #095bea; }
.color-picker [data-color-choice="red"] { background: #de2d42; }
.color-picker [data-color-choice="lime"] { background: #a9ed28; }
.color-picker [data-color-choice="orange"] { background: #f87322; }
.theme-toggle:hover { color: var(--text); }
.theme-icon-sun { display: none; }
[data-mode="dark"] .theme-icon-moon { display: none; }
[data-mode="dark"] .theme-icon-sun { display: block; }
.hero { position: relative; min-height: calc(100vh - 56px); display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tagline-rail { display: flex; grid-column: 1; width: var(--rail-width); min-width: 0; align-items: center; justify-content: center; border-right: 1px solid var(--line); }
.tagline-rail p { margin: 0; color: var(--faint); font: 700 9px/13.5px Arial, sans-serif; letter-spacing: .35em; text-transform: uppercase; writing-mode: vertical-lr; white-space: nowrap; }
.hero-main { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: space-between; padding: 72px 7vw 40px; }
.eyebrow, .post-meta, .section-heading, .footer-section-label { color: var(--muted); font: 700 10px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { margin: 0 0 18px; }
.hero h1 { margin: 0; font: 600 clamp(4rem, 13vw, 13rem)/.82 Arial, sans-serif; letter-spacing: -.07em; text-transform: uppercase; }
.featured-strip { display: flex; gap: 12px; overflow-x: auto; margin: 52px -7vw 0; padding: 0 7vw 12px; scrollbar-width: thin; scrollbar-color: var(--strong-line) transparent; }
.featured-card { position: relative; flex: 0 0 210px; height: 124px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.featured-card img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform .35s, opacity .35s; }
.featured-card span { position: absolute; right: 10px; bottom: 10px; left: 10px; color: white; font: 700 10px/1.25 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 8px #000; }
.featured-card:hover img { opacity: 1; transform: scale(1.04); }
.hero-bottom { max-width: 650px; }
.hero-description { max-width: 620px; margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.hero-description strong { color: var(--text); }
.scroll-cue { display: block; width: max-content; color: var(--faint); font: 28px Arial, sans-serif; animation: bob 1.8s ease-in-out infinite; }
.marquee { position: sticky; bottom: 0; z-index: 10; width: 100%; overflow: hidden; flex-shrink: 0; border-top: 1px solid var(--line); padding: 12px 0; background: var(--bg); white-space: nowrap; }
.marquee span { display: block; width: max-content; color: var(--muted); font: 600 10px/15px Arial, sans-serif; letter-spacing: .3em; text-transform: uppercase; animation: marquee 24s linear infinite; }
.section-shell { width: 100%; max-width: var(--max); margin: 0 auto; border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; gap: 20px; padding: 24px; border-bottom: 1px solid var(--line); }
.section-heading a { color: var(--text); }
.post-row { display: block; padding: 34px 7vw; border-bottom: 1px solid var(--line); transition: background .2s; }
.post-row:hover { background: var(--surface); }
.post-meta { display: flex; gap: 10px; margin-bottom: 18px; font-size: 9px; }
.post-row-content { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: 28px; align-items: center; }
.post-row-content img { width: 100%; height: 190px; border: 1px solid var(--line); object-fit: cover; transition: transform .3s; }
.post-row:hover img { transform: scale(1.01); }
.post-row h2 { margin: 0; font: 600 clamp(1.5rem, 3vw, 2.8rem)/1.05 Arial, sans-serif; letter-spacing: -.045em; }
.post-row p { max-width: 600px; margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.page-main { min-height: 55vh; }
.page-intro { max-width: var(--max); margin: 0 auto; padding: 110px 7vw 90px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
.page-intro h1 { max-width: 760px; margin: 22px 0 24px; font: 600 clamp(3.3rem, 8vw, 8rem)/.9 Arial, sans-serif; letter-spacing: -.065em; }
.page-intro h1 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.04em; }
.page-intro > p:last-child { max-width: 520px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.archive-shell { max-width: 900px; }
.article-main { max-width: 1180px; margin: 0 auto; }
.article-header { max-width: 900px; padding: 96px 7vw 50px; }
.article-header h1 { margin: 22px 0; font: 600 clamp(3rem, 7vw, 7rem)/.92 Arial, sans-serif; letter-spacing: -.06em; }
.article-header > p { max-width: 620px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.article-hero { margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-hero img { display: block; width: 100%; max-height: 620px; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: 70px; padding: 70px 7vw 110px; }
.article-aside { display: flex; flex-direction: column; gap: 28px; color: var(--muted); font: 700 10px Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.article-aside a:hover { color: var(--text); }
.article-aside audio { width: 190px; }
.prose { font-size: 19px; line-height: 1.85; }
.prose p { margin: 0 0 28px; }
.prose h2, .prose h3, .prose h4 { margin: 56px 0 18px; font: 600 30px/1.1 Arial, sans-serif; letter-spacing: -.04em; }
.prose blockquote { margin: 40px 0; padding-left: 24px; border-left: 2px solid var(--text); color: var(--muted); font-style: italic; }
.prose a { text-decoration: underline; text-underline-offset: 4px; }
.prose code { padding: 2px 5px; background: var(--surface); font-size: .85em; }
.prose hr { margin: 45px 0; border: 0; border-top: 1px solid var(--line); }
.site-footer { border-top: 1px solid var(--line); }
.footer-section-label { padding: 24px; border-bottom: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; }
.contact-copy, .contact-form { padding: 64px 7vw; }
.contact-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; border-right: 1px solid var(--line); }
.contact-copy h2 { max-width: 480px; margin: 0 0 20px; font: 600 clamp(2rem, 4vw, 3.5rem)/1.05 Arial, sans-serif; letter-spacing: -.05em; }
.contact-copy p { max-width: 420px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.availability { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font: 700 10px Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.availability > span { width: 8px; height: 8px; margin-top: 2px; border-radius: 50%; background: #4ade80; }
.availability strong, .availability small { display: block; font: inherit; }
.availability small { margin-top: 8px; color: var(--faint); font-size: 9px; }
.contact-form { display: flex; flex-direction: column; gap: 9px; }
.contact-form label { margin-top: 10px; color: var(--muted); font: 700 10px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--strong-line); outline: 0; resize: vertical; color: var(--text); background: transparent; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--text); }
.contact-form button { align-self: flex-start; margin-top: 20px; padding: 13px 18px; border: 1px solid var(--text); color: var(--bg); background: var(--text); cursor: pointer; font: 700 10px Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.form-note { color: var(--faint); font: 11px Arial, sans-serif; }
.sub-footer { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 0 24px; border-top: 1px solid var(--line); color: var(--faint); font: 11px Arial, sans-serif; }
.source-article { padding-top: 0; }
.article-band { width: 100%; border-top: 1px solid var(--line); }
.article-frame { width: 100%; max-width: 896px; margin: 0 auto; border-right: 1px solid var(--line); border-left: 1px solid var(--line); padding-right: 64px; padding-left: 64px; }
.article-title-frame { padding-top: 64px; padding-bottom: 48px; }
.article-title-frame h1 { max-width: 760px; margin: 0; font: 600 clamp(2rem, 5vw, 4rem)/1.08 Arial, sans-serif; letter-spacing: -.045em; }
.article-title-frame p { max-width: 680px; margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.article-meta { display: flex; gap: 10px; margin-top: 20px; color: var(--muted); font: 700 10px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.article-listen-frame { padding-top: 20px; padding-bottom: 20px; }
.listen-bar { display: flex; align-items: center; gap: 12px; min-height: 38px; color: var(--muted); font: 700 10px Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.listen-button { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: transparent; cursor: pointer; font-size: 10px; }
.listen-bar audio { display: none; }
.listen-bar input[type="range"] { flex: 1; accent-color: var(--text); }
.listen-time { min-width: 38px; text-align: right; color: var(--faint); font-size: 9px; letter-spacing: .08em; }
.listen-unavailable { color: var(--faint); }
.article-image-frame { padding-top: 32px; padding-bottom: 32px; }
.article-image-frame img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--surface); }
.article-content { padding-top: 48px; padding-bottom: 64px; }
.article-content.prose { max-width: 896px; font-size: 17px; line-height: 1.9; }
.article-content.prose p { max-width: 680px; margin: 0 auto 24px; }
.article-content.prose h2, .article-content.prose h3, .article-content.prose h4 { max-width: 680px; margin: 48px auto 16px; font: 600 24px/1.2 Arial, sans-serif; letter-spacing: -.02em; }
.article-content.prose ul, .article-content.prose ol { max-width: 680px; margin: 0 auto 24px; }
.article-end { display: flex; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 28px; color: var(--muted); font: 700 10px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.article-end a:hover { color: var(--text); }
.article-breadcrumb { display: flex; align-items: center; gap: 9px; margin-left: 24px; color: var(--muted); font: 600 10px/15px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.article-breadcrumb a:hover { color: var(--text); }
.article-breadcrumb span:last-child { color: var(--faint); }
.source-post { margin-top: 56px; padding: 0; }
.source-post-meta { display: flex; align-items: center; gap: 8px; padding: 20px 64px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font: 600 10px/15px Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.source-post-meta .article-category { color: var(--muted); }
.source-post-meta .article-divider { color: var(--faint); font-size: 16px; letter-spacing: normal; }
.listen-inline { display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font: 600 10px/15px Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.source-post-meta audio { display: none; }
.listen-inline:hover { color: var(--text); }
.listen-inline.is-speaking { color: var(--accent); }
.listen-icon { font-size: 9px; }
.source-post-title { padding: 56px 64px 0; border-bottom: 0; }
.source-post-title h1 { max-width: 820px; margin: 0; color: var(--text); font: 600 clamp(3.5rem, 8vw, 8rem)/.9 Arial, Helvetica, sans-serif; letter-spacing: -.045em; }
.title-display-word { display: inline-block; font-family: "Space Grotesk", Arial, sans-serif; font-weight: 700; letter-spacing: -.04em; }
.title-display-pair { padding: 0 .04em; font-size: 1.18em; font-family: "Fraunces", Georgia, serif; letter-spacing: -.06em; line-height: .82; }
.source-post-title p { max-width: 720px; margin: 28px 0 0; color: var(--muted); font-size: 20px; line-height: 1.75; }
.source-post-lead-box { max-width: none; margin: 28px -64px 0; padding: 22px 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 0; border-right: 0; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.source-post-lead-box p { margin: 0; }
.source-post-body { padding: 48px 64px; }
.source-post-body.prose { font-size: 17px; line-height: 2.05; }
.source-post-body.prose p { max-width: none; margin: 0 0 24px; color: var(--muted); }
.source-post-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.source-post-nav > div { min-height: 132px; padding: 32px 64px; }
.source-post-nav > div + div { border-left: 1px solid var(--line); text-align: right; }
.source-post-nav a { display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.source-post-nav a span, .source-post-nav .nav-empty { color: var(--muted); font: 600 10px/15px Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.source-post-nav strong { font: 600 14px/1.35 Arial, sans-serif; }
.source-post-nav a:hover strong { color: var(--muted); }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes bob { 50% { transform: translateY(5px); } }
@media (max-width: 700px) {
  .logo-button { width: 48px; height: 56px; }
  .main-nav { gap: 14px; margin-right: 12px; }
  .hero-main { padding: 54px 24px 30px; }
  .tagline-rail { width: var(--rail-width); }
  .featured-strip { margin-right: -24px; margin-left: -24px; padding-right: 24px; padding-left: 24px; }
  .featured-card { flex-basis: 180px; height: 108px; }
  .hero-description { font-size: 15px; }
  .section-heading { padding: 20px 16px; }
  .post-row { padding: 30px 24px; }
  .post-row-content { grid-template-columns: 1fr; gap: 20px; }
  .post-row-content img { height: 180px; }
  .page-intro { padding: 76px 24px 60px; }
  .article-header { padding: 70px 24px 35px; }
  .article-layout { grid-template-columns: 1fr; gap: 38px; padding: 45px 24px 75px; }
  .article-aside { flex-direction: row; align-items: center; justify-content: space-between; }
  .article-aside audio { width: 150px; }
  .prose { font-size: 17px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-copy { border-right: 0; border-bottom: 1px solid var(--line); }
  .contact-copy, .contact-form { padding: 48px 24px; }
  .article-frame { padding-right: 24px; padding-left: 24px; }
  .article-title-frame { padding-top: 48px; padding-bottom: 36px; }
  .article-content { padding-top: 36px; padding-bottom: 48px; }
  .article-content.prose { font-size: 16px; line-height: 1.8; }
  .article-end { align-items: flex-start; flex-direction: column; }
}

.header-spacer { flex: 1; }
.nav-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .3); opacity: 0; pointer-events: none; transition: opacity .3s; }
.nav-drawer { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 288px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); transform: translateX(-100%); transition: transform .3s ease-in-out; }
.nav-backdrop, .nav-drawer { display: none !important; }
.nav-drawer.is-open { transform: translateX(0); }
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
.nav-drawer-header { display: flex; height: 56px; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.nav-drawer-header strong { flex: 1; font: 600 14px Arial, sans-serif; letter-spacing: -.02em; }
.nav-drawer-header button { width: 32px; height: 32px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 24px; line-height: 1; }
.nav-drawer-content { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding: 24px 16px; }
.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-drawer-content p { margin: 0 0 9px; color: var(--muted); font: 700 10px Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.nav-drawer-content small { margin: 12px 8px 2px; color: var(--faint); font: 700 9px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.nav-drawer-content a { display: flex; height: 36px; align-items: center; padding: 0 12px; border-radius: 4px; color: var(--muted); font: 500 14px Arial, sans-serif; }
.nav-drawer-content a:hover { color: var(--text); background: var(--surface); }
.nav-drawer-content a.is-active { color: var(--text); background: var(--surface); }
.nav-drawer-content .nav-dev { margin: 0 0 0 auto; color: var(--faint); font-size: 9px; }
.nav-drawer-content hr { width: calc(100% + 32px); margin: 20px -16px 4px; border: 0; border-top: 1px solid var(--line); }
.source-home-hero { min-height: 100svh; display: flex; flex-direction: column; padding-top: 56px; border-bottom: 1px solid var(--line); }
.source-hero-body { display: grid; flex: 1; grid-template-columns: var(--rail-width) minmax(0, 1fr); }
.source-hero-main { display: flex; grid-column: 2; min-width: 0; flex-direction: column; justify-content: space-between; padding: 24px 7vw 48px; }
.source-name { display: flex; align-items: center; margin: 0; font: 600 clamp(2.2rem, 11vw, 15rem)/.9 Arial, sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.source-name span { display: inline-block; width: 2px; height: 1.2em; margin-left: 6px; border-radius: 1px; background: #ef4444; animation: bob 2.4s ease-in-out infinite; }
.source-name .hero-letter { width: auto; height: auto; margin-left: 0; background: transparent; animation: letter-in .25s ease-out both; }
.source-name .hero-letter { width: auto; height: auto; margin-left: 0; background: transparent; animation: letter-in .25s ease-out both; }
.source-carousel-wrap { margin: 40px -7vw; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.source-carousel-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 7vw; border-bottom: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--surface) 50%, transparent); font: 600 10px/15px Arial, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.carousel-controls { display: flex; gap: 8px; }
.carousel-controls button { width: 32px; height: 32px; border: 1px solid var(--strong-line); color: var(--muted); background: var(--bg); cursor: pointer; }
.carousel-controls button:hover { color: var(--text); border-color: var(--text); }
.source-carousel { display: flex; overflow-x: auto; scrollbar-width: none; }
.source-carousel::-webkit-scrollbar { display: none; }
.source-card { display: flex; flex: 0 0 320px; min-height: 271px; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px; border-right: 1px solid var(--line); }
.source-card:first-child { margin-left: 40px; }
.source-card:hover { background: var(--surface); transform: translateY(-2px); }
.source-card-content { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.source-card-meta, .source-read { font: 600 10px/15px Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.source-card-meta { color: var(--muted); }
.source-read { color: var(--faint); }
.source-card-meta { display: flex; height: 24px; align-items: center; gap: 8px; overflow: hidden; }
.card-category { display: block; height: 15px; color: var(--muted); font: 600 10px/15px Arial, Helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.card-divider { display: block; height: 24px; color: var(--faint); font: 16px/24px Arial, Helvetica, sans-serif; letter-spacing: normal; }
.card-detail { display: block; height: 15px; color: var(--muted); font: 400 10px/15px Arial, Helvetica, sans-serif; letter-spacing: normal; text-transform: none; }
.source-card h3 { margin: 0; color: var(--text); font: 600 16.48px/22.66px Arial, sans-serif; }
.source-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 14px; line-height: 28px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
@media (min-width: 0) {
  [data-mode="dark"] .source-card h3 { color: #ededed; }
}
.source-read { display: flex; gap: 4px; align-items: center; }
.source-hero-description { max-width: 650px; }
.source-hero-description p { margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 2; }
.source-hero-description strong { color: var(--text); }
.source-scroll { color: var(--faint); font-size: 28px; }
.source-content-section { border-top: 1px solid var(--line); }
.source-section-label, .source-content-frame, .manifesto-list { width: 100%; max-width: 896px; margin: 0 auto; border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
.source-section-label { padding: 24px 64px; color: var(--muted); border-bottom: 1px solid var(--line); font: 700 10px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.source-content-frame { padding: 48px 64px; color: var(--muted); font-size: 16px; line-height: 2; }
.source-content-frame p { margin: 0 0 16px; }
.source-content-frame p:last-child { margin-bottom: 0; }
.source-content-frame h2, .source-content-frame h3 { color: var(--text); font-family: inherit; letter-spacing: 0; line-height: 1.35; overflow-wrap: anywhere; }
.source-content-frame h2 { margin: 32px 0 16px; font-size: 24px; }
.source-content-frame h3 { margin: 32px 0 12px; font-size: 18px; }
.source-content-frame h2:first-child { margin-top: 0; }
#writing article { padding: 24px 0; border-top: 1px solid var(--line); }
#writing article h3 { margin-top: 0; }
.pillar-list, .method-list, .work-list { margin: -48px -64px; }
.pillar-list > div, .method-list > div, .work-list > div { display: flex; gap: 24px; padding: 32px 64px; border-bottom: 1px solid var(--line); }
.pillar-list > div:last-child, .method-list > div:last-child, .work-list > div:last-child { border-bottom: 0; }
.pillar-list b { width: 32px; flex-shrink: 0; color: var(--faint); font: 600 12px monospace; }
.pillar-list strong, .method-list strong, .work-list strong { display: block; margin-bottom: 8px; color: var(--text); font: 600 16px Arial, sans-serif; }
.source-content-frame blockquote { margin: -16px -24px 32px; padding-left: 20px; border-left: 2px solid var(--strong-line); font-style: italic; }
.method-list, .work-list { border-top: 1px solid var(--line); }
.work-list p { margin: 0 0 8px; font-size: 14px; line-height: 1.8; }
.work-list p:last-child { margin-bottom: 0; }
.work-list p b { color: var(--text); font-weight: 600; }
.manifesto-list { list-style: none; }
.manifesto-list details { border-bottom: 1px solid var(--line); }
.manifesto-list summary { display: flex; gap: 12px; align-items: flex-start; padding: 20px 64px; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1.8; list-style: none; }
.manifesto-list summary::-webkit-details-marker { display: none; }
.manifesto-list summary:before { width: 6px; height: 6px; flex-shrink: 0; margin-top: 10px; border-radius: 50%; background: var(--faint); content: ''; }
.manifesto-list summary span { color: var(--text); font-weight: 600; }
.manifesto-list summary b { margin-left: auto; color: var(--faint); font: 16px monospace; }
.manifesto-list details[open] summary b { transform: rotate(45deg); }
.manifesto-list details p { margin: -4px 64px 24px 82px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form > div { display: flex; flex-direction: column; gap: 6px; }
.contact-form > .form-row { display: grid; flex-direction: initial; }
.contact-form input, .contact-form textarea { border: 1px solid var(--line); padding: 12px 16px; }
.contact-form textarea { resize: none; }
.contact-form .optional { font-weight: 400; letter-spacing: 0; text-transform: none; }
.consent { display: flex; flex-direction: row !important; align-items: flex-start; gap: 12px; color: var(--muted) !important; font: 12px/1.7 Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
.consent input { width: 16px; height: 16px; flex-shrink: 0; margin: 2px 0 0; padding: 0; accent-color: var(--text); }
.contact-form button { width: 100%; align-self: stretch; }
.contact-form .form-note { margin: 0; }
@media (max-width: 700px) {
  .source-hero-main { padding: 24px 24px 36px; }
  .source-carousel-wrap { margin-right: -24px; margin-left: -24px; }
  .source-carousel-heading { padding-right: 24px; padding-left: 24px; }
  .source-card { flex-basis: 288px; }
  .source-hero-description p { font-size: 14px; line-height: 1.9; }
  .source-section-label, .source-content-frame, .manifesto-list { border-right: 0; border-left: 0; }
  .source-section-label { padding: 20px 24px; }
  .source-content-frame { padding: 36px 24px; }
  .pillar-list, .method-list, .work-list { margin: -36px -24px; }
  .pillar-list > div, .method-list > div, .work-list > div { padding: 28px 24px; }
  .manifesto-list summary { padding: 18px 24px; }
  .manifesto-list details p { margin-right: 24px; margin-left: 54px; }
  .form-row { grid-template-columns: 1fr; }
  .article-breadcrumb { margin-left: 16px; }
  .source-post { margin-top: 56px; border-right: 0; border-left: 0; }
  .source-post-meta, .source-post-title, .source-post-body { padding-right: 24px; padding-left: 24px; }
  .source-post-title { padding-top: 42px; padding-bottom: 0; }
  .source-post-title h1 { font-size: clamp(2.6rem, 13vw, 5rem); line-height: .94; }
  .source-post-title p { margin-top: 22px; font-size: 18px; line-height: 1.7; }
  .source-post-lead-box { margin: 22px -24px 0; padding: 18px 24px; }
  .source-post-meta { padding: 18px 24px 20px; flex-wrap: wrap; }
  .listen-inline { width: 100%; margin-bottom: 8px; }
  .meta-start-divider { display: none; }
  .title-display-pair { font-size: 1.08em; }
  .source-post-nav { grid-template-columns: 1fr; }
  .source-post-nav > div { min-height: 96px; padding: 24px; }
  .source-post-nav > div + div { border-top: 1px solid var(--line); border-left: 0; text-align: left; }
}

@media (min-width: 768px) {
  :root { --rail-width: 56px; }
  .source-home-hero { padding-bottom: 4px; }
  .source-hero-main { padding: 80px 64px; }
  .source-carousel-wrap { margin-right: -64px; margin-left: -64px; }
  .source-carousel-wrap { transform: translateY(10px); }
  .source-carousel-heading { padding-right: 64px; padding-left: 64px; }
  #thesis { min-height: 338px; }
  #pillars { min-height: 644px; }
  #method { min-height: 484px; }
  #works { min-height: 467px; }
  #manifesto { min-height: 410px; }
  .footer-section-label { display: flex; min-height: 66px; align-items: center; }
  .contact-grid { height: 493px; }
  .sub-footer { height: 57px; min-height: 57px; }
}

/* Match the compact source footer rather than the earlier PHP contact treatment. */
.site-footer { border-top: 1px solid var(--line); }
.footer-section-label { padding: 24px 64px; color: var(--muted); border-bottom: 1px solid var(--line); font: 700 12px Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.contact-copy, .contact-form { padding: 56px 64px; }
.contact-copy { gap: 40px; }
.contact-copy h2 { max-width: 520px; margin: 0 0 20px; font: 600 30px/1.4 Arial, sans-serif; letter-spacing: -.02em; }
.contact-copy p { max-width: 384px; font-size: 16px; line-height: 1.75; }
.availability { font-size: 12px; letter-spacing: .12em; }
.contact-form { gap: 20px; }
.contact-form label { margin-top: 0; }
.contact-form button { margin-top: 0; padding: 14px; }
.sub-footer { height: 56px; min-height: 56px; padding: 0; gap: 0; }
.sub-footer .frelund-logo { box-sizing: content-box; width: 32px; height: 31px; padding: 0 12px; border-right: 1px solid var(--line); }
.sub-footer > span { padding-left: 24px; font-size: 12px; }
@media (max-width: 700px) {
  .footer-section-label { padding: 20px 24px; }
  .contact-copy, .contact-form { padding: 48px 24px; }
}

@media (min-width: 768px) {
  .sub-footer { height: 57px; min-height: 57px; }
}

.archive-search { max-width: 720px; margin-top: 38px; }
.archive-search label { display: block; margin-bottom: 9px; color: var(--muted); font: 600 10px/15px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.archive-search > div { display: flex; align-items: center; gap: 10px; }
.archive-search input { min-width: 0; flex: 1; padding: 13px 16px; border: 1px solid var(--line); outline: 0; color: var(--text); background: transparent; font-size: 15px; }
.archive-search input:focus { border-color: var(--strong-line); }
.archive-search button, .archive-search a { padding: 13px 16px; border: 1px solid var(--text); color: var(--text); background: transparent; cursor: pointer; font: 600 10px/15px Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.archive-search button:hover, .archive-search a:hover { color: var(--bg); background: var(--text); }
.archive-result-line { padding: 20px 24px; border-bottom: 1px solid var(--line); color: var(--muted); font: 600 10px/15px Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.archive-result-line + .post-list .post-row { padding: 28px 24px; }
.archive-result-line + .post-list .post-row-content { grid-template-columns: minmax(0, 1fr) auto; gap: 28px; }
.archive-result-line + .post-list .post-row h2 { font-size: 24px; line-height: 1.2; }
.archive-result-line + .post-list .post-row p { margin-top: 10px; font-size: 14px; line-height: 1.7; }
.archive-read { align-self: center; color: var(--muted); font: 600 10px/15px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.archive-empty { padding: 64px 24px; color: var(--muted); }
.archive-empty h2 { margin: 0 0 10px; color: var(--text); font: 600 28px/1.2 Arial, sans-serif; }
.archive-empty p { margin: 0; font-size: 16px; line-height: 1.7; }
@media (max-width: 700px) {
  .archive-search > div { align-items: stretch; flex-wrap: wrap; }
  .archive-search input { flex-basis: 100%; }
  .archive-result-line + .post-list .post-row-content { grid-template-columns: 1fr; gap: 14px; }
  .archive-result-line + .post-list .post-row h2 { font-size: 21px; }
  .archive-read { align-self: flex-start; }
}

.static-home-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2rem;
  background: #000;
  color: #a1a1aa;
  font-family: 'Outfit', sans-serif;
}
.static-home-body *, .static-home-body *::before, .static-home-body *::after { box-sizing: border-box; }
.static-home-footer { width: 100%; max-width: 64rem; display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 600; letter-spacing: .2em; line-height: 1rem; text-transform: uppercase; opacity: 0; transform: translateY(12px); animation: static-home-reveal 1s cubic-bezier(.16, 1, .3, 1) .1s forwards; }
.static-home-brand, .static-home-links a, .static-home-separator { color: #3f3f46; }
.static-home-links { display: flex; gap: 2rem; align-items: center; }
.static-home-links a { text-decoration: none; transition: color .3s; }
.static-home-links a:hover, .static-home-links a:focus-visible { color: #fff; }
.static-home-separator { user-select: none; }
@keyframes static-home-reveal { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .static-home-footer { align-items: flex-end; flex-direction: column; gap: 1rem; }
  .static-home-links { gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
}