@charset "UTF-8";
/* ======================================================================== liminal notes — Global Styles Ported from Crale's Guide architecture. Charter + sage palette. ======================================================================== */
/* --- Custom Properties ------------------------------------------------- */
:root { /* Colour — Light mode (default) */ --color-bg: #FAF9F6; --color-text: #2C2C2C; --color-secondary: #4A4745; --color-muted: #6B6865; --color-accent: #4A6741; --color-border: #D8D4CC; --color-surface: #F0EDE8; /* Typography — 1.25 modular scale anchored at 17px */ --font-body: "Charter", "Bitstream Charter", "Sitka Text", "Georgia", serif; --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif; --step--2: 0.6875rem; /* ~11px */ --step--1: 0.875rem; /* ~14px */ --step-0: 1rem; /* 17px */ --step-1: 1.25rem; /* ~21px */ --step-2: 1.5625rem; /* ~27px */ --step-3: 1.953rem; /* ~33px */ --step-4: 2.5rem; /* ~42px */ /* Layout */ --reading-max-width: 640px; --reading-wide-max-width: 960px; --reading-padding: 0 1.5rem; }

/* --- Dark mode --------------------------------------------------------- */
.dark { --color-bg: #1C1E1A; --color-text: #E5E3DC; --color-secondary: #C4BFB8; --color-muted: #8A8580; --color-accent: #8AAF7E; --color-border: #3A3830; --color-surface: #2A2C26; }

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

body { min-height: 100dvh; }

img, picture, video, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; }

/* --- Base -------------------------------------------------------------- */
html { font-family: var(--font-body); font-size: 17px; line-height: 1.75; font-weight: 400; color: var(--color-text); background-color: var(--color-bg); font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* --- Typography -------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); color: var(--color-text); font-feature-settings: 'liga' 1, 'kern' 1; }

h1 { font-size: var(--step-3); font-weight: 600; line-height: 1.15; }

h2 { font-size: var(--step-2); font-weight: 600; line-height: 1.25; margin-top: 1.75rem; margin-bottom: 0.4rem; }

h3 { font-size: var(--step-1); font-weight: 500; line-height: 1.35; margin-top: 1.25rem; margin-bottom: 0.3rem; }

h4 { font-size: var(--step-0); font-weight: 600; line-height: 1.5; margin-top: 1.2rem; margin-bottom: 0.3rem; }

p { margin-bottom: 1em; }

p:last-child { margin-bottom: 0; }

ul, ol { margin-top: 0.4rem; margin-bottom: 0.9rem; padding-left: 1.5em; }

li { margin-bottom: 0.35rem; }

blockquote { border-left: 2px solid var(--color-border); padding-left: 1.25rem; color: var(--color-secondary); font-style: italic; margin: 1.5rem 0; }

code { font-size: 0.875em; background: var(--color-surface); padding: 0.15em 0.35em; border-radius: 3px; }

pre { background: var(--color-surface); padding: 1rem 1.25rem; border-radius: 4px; overflow-x: auto; margin: 1.5rem 0; }

pre code { background: none; padding: 0; border-radius: 0; }

/* --- Links ------------------------------------------------------------- */
a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

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

/* --- Drop Cap ---------------------------------------------------------- */
.drop-cap > p:first-child::first-letter { font-family: var(--font-body); float: left; font-size: 3.8em; line-height: 0.75; font-weight: 400; padding-right: 0.08em; padding-top: 0.08em; color: var(--color-text); }

/* --- Layout ------------------------------------------------------------ */
.reading-column { max-width: var(--reading-max-width); margin-left: auto; margin-right: auto; padding: var(--reading-padding); }

.reading-column--wide { max-width: var(--reading-wide-max-width); }

.page-header { margin-top: 3rem; margin-bottom: 1.5rem; }

.page-content { margin-bottom: 3rem; }

/* Homepage layout */
.page-home .page-content { padding-top: 15vh; padding-bottom: 10vh; }

.page-home .page-content > p:first-child { font-size: var(--step-2); line-height: 1.35; margin-bottom: 1.5rem; }

/* --- Site Header / Nav ------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--color-border); padding: 1rem 0; }

.site-nav { display: flex; align-items: center; gap: 1.5rem; }

.site-title { font-family: var(--font-body); font-size: var(--step-1); font-weight: 600; color: var(--color-text); text-decoration: none; white-space: nowrap; }

.site-title:hover { color: var(--color-accent); }

.nav-links { display: flex; list-style: none; gap: 1.25rem; margin: 0; padding: 0; }

.nav-links a { font-family: var(--font-ui); font-size: var(--step--1); color: var(--color-secondary); text-decoration: none; letter-spacing: 0.02em; }

.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-text); }

/* Mobile nav (details/summary) */
.nav-menu { display: none; }

.nav-toggle { list-style: none; cursor: pointer; color: var(--color-secondary); display: flex; align-items: center; }

.nav-toggle::-webkit-details-marker { display: none; }

.nav-menu .nav-links { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 1rem 1.5rem; gap: 0.75rem; }

/* Dark mode toggle */
.dark-toggle { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--color-secondary); padding: 0.25rem; display: flex; align-items: center; }

.dark-toggle:hover { color: var(--color-text); }

.icon-moon { display: none; }

.dark .icon-sun { display: none; }

.dark .icon-moon { display: block; }

/* --- Footer ------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--color-border); padding: 2rem 0; margin-top: 2rem; color: var(--color-muted); font-size: var(--step--1); }

/* --- Section Dividers (fleuron) ---------------------------------------- */
hr { border: none; text-align: center; margin: 0.75rem 0; }

hr::after { content: "\2766"; color: var(--color-border); font-size: 0.9rem; }

/* --- Table of Contents ------------------------------------------------- */
.toc { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }

.toc-title { font-family: var(--font-ui); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: 0.5rem; }

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

.toc li { margin-bottom: 0.25rem; }

.toc li.toc-sub { padding-left: 1.25rem; }

.toc a { font-size: var(--step--1); color: var(--color-secondary); text-decoration: none; }

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

/* --- Focus States (WCAG 2.4.7) ---------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- Transitions ------------------------------------------------------- */
a, button, input, textarea { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 768px) { html { font-size: 16px; } h1 { font-size: var(--step-2); } h2 { font-size: var(--step-1); } /* Swap desktop nav for mobile menu */ .nav-links--desktop { display: none; } .nav-menu { display: block; } .site-nav { position: relative; } }

@media (max-width: 480px) { html { font-size: 15px; } }

/* --- Print ------------------------------------------------------------- */
@media print { *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; } html { font-size: 11pt; line-height: 1.5; } body { min-height: auto; } .site-header, .site-footer, .dark-toggle, .toc, nav { display: none !important; } .reading-column, .reading-column--wide { max-width: none; padding: 0; margin: 0; } h1 { font-size: 22pt; page-break-after: avoid; } h2 { font-size: 16pt; page-break-after: avoid; } p { orphans: 3; widows: 3; } a { text-decoration: none; color: #000 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555 !important; } @page { margin: 2cm; } }

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