* { box-sizing: border-box; margin: 0; padding: 0; } :root { --fg: #313131; --bg: #ffffff; --border: var(--fg); --muted: #9D9291; --muted-bg: #f7f7f7; --page-pad: 1.5rem; --font-size: 18px; --font-size-serif: 1.4em; --line-height: 1.75; /* ~32px at 18px */ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; } /* ==================================================================== Color themes — switched globally via [data-theme] on . Default (no attribute) is the light "Paper" theme above. ==================================================================== */ :root[data-theme="amber"] { --fg: #3a2d1c; /* deep warm brown-black */ --bg: #f6ddb4; /* warm golden amber paper (Daylight-tablet feel) */ --muted: #a78a5f; /* warm tan */ --muted-bg: #efd2a1; /* deeper amber surface */ } :root[data-theme="ink"] { --fg: #e5e5ea; /* soft neutral off-white */ --bg: #005; /* deep navy (#000055) */ --muted: #8e8e93; /* neutral grey */ --muted-bg: #14145c; /* slightly lifted navy surface */ } /* ==================================================================== Fonts — switched globally via [data-font] on . Default (no attribute) is IBM Plex Mono via --font-body above. ==================================================================== */ :root[data-font="mono"] { --font-body: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-size: 17px; --line-height: 2; } :root[data-font="serif"] { --font-body: "Times New Roman", Times, Georgia, serif; --font-size: 21px; /* Times reading size, scaled down with the rest */ --line-height: 1.6; } html { overflow-x: hidden; } body { font-family: var(--font-body); font-size: var(--font-size); line-height: 3.6; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100vh; } .wrap { max-width: 1100px; margin: 0 auto; padding: var(--page-pad) var(--page-pad) 4rem; } a { color: inherit; } /* universal button — macOS-y light grey, Arial */ button, input[type="submit"] { -webkit-appearance: none; appearance: none; font-family: inherit; font-size: inherit; font-weight: normal; color: var(--fg); outline: 0; display: inline-block; cursor: pointer; text-decoration: none; background-color: var(--bg); background-image: none; padding: 10px 16px; border-radius: 4px; border: 1px solid var(--border); } button:hover, input[type="submit"]:hover { filter: brightness(0.95); } button:active, input[type="submit"]:active { filter: brightness(0.9); } /* form inputs — bordered, inherit body font */ input[type="text"], input[type="email"], input[type="url"], textarea { font-family: inherit; font-size: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border); padding: 10px 16px; outline: none; } input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="url"]::placeholder, textarea::placeholder { color: var(--fg); opacity: .55; } textarea { resize: vertical; } /* header */ .site-header { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem var(--page-pad); margin: 0; } @media (max-width: 700px) { :root { --page-pad: 0.75rem; } .wrap { padding-bottom: 3rem; } } .site-date { margin: 0; } .site-monogram { text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; } .site-monogram:hover { text-decoration: underline; } .monogram-avatar { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; display: block; } /* intro */ .intro { margin: 0 0 2rem; color: var(--fg); } /* leave breathing room above jump-targeted sections */ #subscribe, #about { scroll-margin-top: 3rem; } /* site title bar */ .site-title-bar { text-align: center; padding: 4.5rem 1rem 3.5rem; color: var(--fg); font-size: inherit; } .site-title-bar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; } .site-title-bar a:hover { text-decoration: none; } .title-swatch { display: inline-block; width: 12px; height: 12px; background: var(--swatch); } .season { color: var(--swatch); } .card-subscribe-link { text-decoration: underline; color: var(--fg); } .card-subscribe-link:hover { text-decoration: underline; color: var(--fg); } /* newsletter card */ .newsletter-card { position: relative; border: 1px solid var(--border); padding: 0.25rem 1.5rem 4rem; margin: 0 auto 4rem; } .card-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 5rem; padding-top: 0; } .card-date { margin: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; } /* ==================================================================== Theme switcher — sits in the top-right of the newsletter "letter". Cycles the global color theme and the global typeface. ==================================================================== */ .theme-switcher { position: absolute; top: 1.5rem; right: 1.5rem; display: inline-flex; align-items: stretch; gap: 0.5rem; } .theme-switcher button { -webkit-appearance: none; appearance: none; border: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--fg); cursor: pointer; font-family: inherit; font-size: 0.82em; line-height: 1; padding: 0.4rem 0.6rem; display: inline-flex; align-items: center; gap: 0.4rem; } /* Hand-drawn leaf glyphs on each toggle. Masked so they take the current text color and adapt to every theme. */ .theme-switcher .leaf { display: inline-block; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .theme-switcher .leaf-1 { width: 20px; height: 14px; -webkit-mask-image: url(../images/leaf-1.svg); mask-image: url(../images/leaf-1.svg); } .theme-switcher .leaf-2 { width: 19px; height: 16px; -webkit-mask-image: url(../images/leaf-2.svg); mask-image: url(../images/leaf-2.svg); } @media (max-width: 700px) { .theme-switcher button { padding: 0.45rem 0.55rem; font-size: 0.78em; } } /* newsletter */ .newsletter { margin: 5rem auto 2.5rem; max-width: 620px; padding: 0; } .newsletter-body { text-align: justify; } .newsletter-header { margin-bottom: 1.25rem; } .newsletter-subject { font-size: inherit; font-weight: normal; margin-bottom: .25rem; } .newsletter-meta { font-size: inherit; } .newsletter-body { line-height: var(--line-height); } .newsletter-body p { margin-bottom: 3em; } .newsletter-body p:last-child { margin-bottom: 0; } .newsletter-body em { font-style: italic; } .newsletter-body strong { font-weight: bold; } .newsletter-body figure { margin: 6rem auto; max-width: 65%; } .newsletter-body img { display: block; max-width: 100%; height: auto; } .newsletter-body figure > img { width: 100%; margin: 0; border: 0; background-color: var(--bg); } .newsletter-body .figure-meta { display: flex; flex-direction: column; align-items: center; margin-top: .5rem; } .newsletter-body figcaption { font-size: inherit; color: inherit; text-align: center; margin: 0; line-height: 1.4; } .newsletter-body figure .dither-toggle { margin-top: .25rem; border: 0; padding: 0; background: transparent; font-size: inherit; color: var(--fg); text-decoration: none; } .newsletter-body figure .dither-toggle:hover { filter: none; background: transparent; color: var(--fg); } @media (max-width: 600px) { .newsletter-body figure { max-width: 100%; } } .newsletter-body a { text-decoration: underline; } .newsletter-body blockquote { border-left: 1px solid var(--border); padding: .25rem 0 .25rem .75rem; margin: 1rem 0; font-style: italic; } .newsletter-permalink { font-size: inherit; font-style: italic; color: var(--fg); margin-top: 1.5rem; } .newsletter-empty { color: var(--fg); font-style: italic; } .archive-link { margin: 2rem 0; font-size: inherit; } .archive-link a { text-decoration: underline; } .past-newsletters { margin: 6rem 0; } .past-newsletters-heading { font-size: inherit; font-weight: normal; color: var(--fg); text-align: center; margin-bottom: 1rem; } .past-newsletters-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); } .past-newsletters-list li { margin: 0; border-bottom: 1px solid var(--border); } .past-newsletters-list li:last-child { border-bottom: 0; } .past-newsletters-list a { display: block; padding: 0.85rem 1.25rem; text-decoration: none; line-height: 1.5; } .past-newsletters-list a:hover { background: rgba(255,255,255,.04); } .past-newsletters-list .issue-from-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .past-newsletters-list .issue-date { color: var(--fg); white-space: nowrap; display: inline-flex; gap: 1.5rem; } .past-newsletters-list .issue-subject { margin-top: 0; } /* subscribe */ .subscribe-row { margin: 6rem 0; border: 1px solid var(--border); display: grid; grid-template-columns: 1fr 220px; column-gap: 2rem; padding: 1.25rem 2rem 1.5rem; align-items: stretch; aspect-ratio: 3 / 2; line-height: 1.5; } .subscribe-content { grid-column: 1; grid-row: 1; } .subscribe-image { grid-column: 2; grid-row: 1; } .subscribe-image { margin-top: 1.25rem; width: 220px; height: 220px; overflow: hidden; } .subscribe-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .subscribe-content { padding: 0; text-align: left; display: flex; flex-direction: column; } .subscribe-from { margin: 1.5rem 0 1rem; color: var(--fg); } .subscribe-heading { font-size: inherit; font-weight: normal; color: var(--fg); margin: 0; padding-top: 0; } .subscribe-row form { display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; margin-top: auto; margin-bottom: auto; padding-left: 3rem; } .subscribe-row input[type="email"] { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--fg); padding: .5rem 0; width: 100%; max-width: 100%; } .subscribe-row input[type="email"]::placeholder { color: var(--muted); opacity: 1; } /* about */ .about { margin: 7rem 0 4rem; } .about h1, .about h2 { font-size: inherit; font-weight: normal; margin-bottom: 1.5rem; } .about-layout { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; } .about-row { display: flex; align-items: stretch; gap: 0; width: 100%; margin-bottom: 1.5rem; } .about-welcome { flex: 1; min-width: 0; border: 1px solid var(--border); border-left: 0; padding: 1rem 1rem 0; line-height: var(--line-height); } .about-welcome p { margin: 0; } @media (max-width: 700px) { .about-row { flex-direction: column; } .about-welcome { width: 100%; border-left: 1px solid var(--border); border-top: 0; } } .about-portrait { width: 260px; max-width: 100%; margin: 0; border: 1px solid var(--border); } .about-content { width: 100%; } .about-portrait img { display: block; width: 100%; height: auto; border: 0; } img.dithered { image-rendering: pixelated; image-rendering: crisp-edges; } /* The dither bakes dark ink on transparent paper, so on the dark "Ink" theme the highlights would fall through to the dark page and the photo would vanish. Give dithered images a light paper backing there so they keep reading as positive prints. */ :root[data-theme="ink"] img.dithered { background-color: #f4f1ea; } .about-portrait img { image-rendering: auto; } .dither-toggle { display: inline-block; margin: .5rem .75rem .5rem; font-size: inherit; padding: 2px 8px; } .about-portrait .dither-toggle { display: block; margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: .5rem .75rem; background: transparent; text-align: left; width: 100%; } .about-portrait .dither-toggle:hover { filter: none; background: rgba(0,0,0,.05); } .about-portrait figcaption { font-size: inherit; color: var(--fg); padding: .5rem .75rem; border-top: 1px solid var(--border); text-align: left; margin: 0; line-height: initial; } .about-body { margin-bottom: 1.5rem; line-height: var(--line-height); } .about-body p { margin-bottom: 1em; } .about-body p:last-child { margin-bottom: 0; } .about-body a { text-decoration: underline; } .about-body em { font-style: italic; } .about-body strong { font-weight: bold; } .about-body ul { list-style: none; padding: 0; margin: 0 0 1.5em; border: 1px solid var(--border); } .about-body li { padding: .5rem .75rem; margin: 0; border-bottom: 1px solid var(--border); } .about-body li:last-child { border-bottom: 0; } .about-links { list-style: none; margin: 1.5rem 0; } .about-links li { padding: .15rem 0; } .about-links a { text-decoration: underline; } /* footer */ .site-footer { border-top: 1px solid var(--border); padding: 1rem var(--page-pad); margin: 0; } .site-footer a { color: inherit; } .footer-elsewhere { color: var(--fg); margin: 0 0 .5rem; } .footer-note { color: var(--fg); font-size: inherit; margin: .5rem 0 0; max-width: none; line-height: 1.5; } .footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: .75rem; } .footer-links a { text-decoration: underline; } .footer-meta { margin: 0; } /* Random leaf glyph standing in for the separator dot in the footer meta. */ .footer-leaf { display: inline-block; vertical-align: middle; width: 1.1em; height: 0.9em; margin: 0 0.45em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .footer-leaf.leaf-1 { -webkit-mask-image: url(../images/leaf-1.svg); mask-image: url(../images/leaf-1.svg); } .footer-leaf.leaf-2 { -webkit-mask-image: url(../images/leaf-2.svg); mask-image: url(../images/leaf-2.svg); } /* utility */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ==================================================================== Mobile overrides — kept at the end of the file so they win the cascade against later same-specificity rules. ==================================================================== */ @media (max-width: 700px) { .newsletter-card { border: 0; padding: 0; margin: 0 0 2rem; } .card-header { margin-bottom: 2.5rem; } .card-date { flex: 1 1 100%; flex-wrap: wrap; gap: .35rem 1rem; } /* let the toggles drop below the date instead of pinning to the corner */ .theme-switcher { position: static; top: auto; right: auto; } .newsletter { padding: 0; margin: 2rem 0 1.5rem; } .newsletter-body figure { margin: 2.5rem 0; max-width: 100%; } /* postcard: keep the form-left / image-right layout, just smaller */ .subscribe-row { grid-template-columns: 1fr 140px; column-gap: 1rem; padding: 1rem; aspect-ratio: auto; margin: 4rem 0; } .subscribe-image { width: 140px; height: 140px; margin-top: 0.5rem; } .subscribe-heading { margin-bottom: 1.5rem; } .subscribe-row form { gap: 1.25rem; margin: 0; padding-left: 0; } .subscribe-row input[type="email"] { width: 100%; } /* about: stack same-width with connected border */ .about-row { flex-direction: column; align-items: center; gap: 0; } .about-portrait, .about-welcome { width: 100%; max-width: 100%; } .about-portrait { border-right: 1px solid var(--border); } .about-welcome { padding: 1rem; border: 1px solid var(--border); border-top: 0; } .past-newsletters-list .issue-from-row { flex-direction: column; align-items: flex-start; gap: .25rem; } .past-newsletters-list .issue-date { white-space: normal; } } /* very tight viewports — keep image on the right, just shrink it */ @media (max-width: 480px) { .subscribe-row { grid-template-columns: 1fr 100px; column-gap: 0.75rem; padding: 0.75rem; } .subscribe-image { width: 100px; height: 100px; margin-top: 0.25rem; } }