@charset "UTF-8";
/* ======================================================================== Liminal Notes — Global Styles Digital garden. Warm ink, colored margins, a notebook you'd want to open. ======================================================================== */
/* --- Custom Properties ------------------------------------------------- */
:root { /* Colour — Light mode */ --color-bg: #F5F3EE; --color-text: #2A2826; --color-secondary: #5C5652; --color-muted: #8A8480; --color-accent: #8B6B4A; --color-accent-hover: #6E5339; --color-border: #D6D0C8; --color-surface: #EBE8E2; /* Accent palette — for cards, tags, visual markers */ --color-craft: #4A7B6F; --color-craft-light: #E4F0EC; --color-ephemera: #8B6B4A; --color-ephemera-light: #F2EBDF; --color-highlight: #C27D4A; --color-highlight-light: #FBF0E4; /* Top stripe */ --color-stripe: linear-gradient(90deg, #4A7B6F 0%, #8B6B4A 50%, #C27D4A 100%); /* 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; --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.5625rem; --step-3: 1.953rem; --step-4: 2.5rem; /* Layout */ --reading-max-width: 640px; --reading-wide-max-width: 960px; --reading-padding: 0 1.5rem; }

/* --- Dark mode --------------------------------------------------------- */
.dark { --color-bg: #1A1917; --color-text: #E3E0D8; --color-secondary: #B8B2A8; --color-muted: #7A756E; --color-accent: #C9A87C; --color-accent-hover: #DFC09A; --color-border: #3A3632; --color-surface: #2A2724; --color-craft: #6BA898; --color-craft-light: #1A2F2A; --color-ephemera: #C9A87C; --color-ephemera-light: #2E2518; --color-highlight: #D4955E; --color-highlight-light: #302418; --color-stripe: linear-gradient(90deg, #6BA898 0%, #C9A87C 50%, #D4955E 100%); }

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

html { -webkit-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; }

/* --- Top Stripe -------------------------------------------------------- */
body::before { content: ""; display: block; height: 3px; background: var(--color-stripe); }

/* --- 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: 3px solid var(--color-highlight); padding-left: 1.25rem; color: var(--color-secondary); font-style: italic; margin: 1.5rem 0; background: var(--color-highlight-light); padding: 1rem 1.25rem; border-radius: 0 4px 4px 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-accent-hover); }

/* --- 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-highlight); }

/* --- 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 ---------------------------------------------------------- */
.page-home .page-content { padding-top: 10vh; padding-bottom: 8vh; }

.home-tagline { font-size: var(--step-2); line-height: 1.4; color: var(--color-secondary); margin-bottom: 2.5rem; font-style: italic; }

.home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2.5rem; }

.home-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem; border-radius: 6px; text-decoration: none; border: 1px solid var(--color-border); transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease; }

.home-card:hover { transform: translateY(-1px); }

.home-card--craft { border-left: 3px solid var(--color-craft); background: var(--color-craft-light); }

.home-card--craft:hover { border-color: var(--color-craft); }

.home-card--ephemera { border-left: 3px solid var(--color-ephemera); background: var(--color-ephemera-light); }

.home-card--ephemera:hover { border-color: var(--color-ephemera); }

.home-card__label { font-family: var(--font-ui); font-size: var(--step-0); font-weight: 600; color: var(--color-text); letter-spacing: 0.01em; }

.home-card__desc { font-size: var(--step--1); color: var(--color-text); line-height: 1.5; opacity: 0.75; }

.home-section-label { 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; }

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

.home-recent li { margin-bottom: 0.4rem; padding-left: 1rem; position: relative; }

.home-recent li::before { content: "\2022"; color: var(--color-highlight); position: absolute; left: 0; }

.home-recent a { font-size: var(--step-0); text-decoration: none; color: var(--color-text); }

.home-recent a:hover { color: var(--color-accent); text-decoration: underline; }

/* --- 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; font-style: italic; }

.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 */
.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); }

.site-footer a { color: var(--color-muted); }

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

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

/* --- Page content list styling ----------------------------------------- */
.page-content h2 { padding-bottom: 0.3rem; border-bottom: 1px solid var(--color-border); }

.page-content li a { text-decoration: none; }

.page-content li a:hover { text-decoration: underline; }

/* --- 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); }

/* --- Details/Summary --------------------------------------------------- */
details { margin: 1rem 0; }

details summary { cursor: pointer; color: var(--color-accent); font-weight: 500; }

details summary:hover { color: var(--color-accent-hover); }

details[open] summary { margin-bottom: 0.75rem; }

/* --- 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); } .nav-links--desktop { display: none; } .nav-menu { display: block; } .site-nav { position: relative; } .home-cards { grid-template-columns: 1fr; } }

@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; } body::before { display: none; } .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 */