/* ---------- Base ----------
Inter is loaded via in each HTML with preconnect hints
— that parallelizes with CSS parsing and is ~200ms faster than @import. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
/* System sans stack — SF Pro on macOS/iOS, Segoe UI on Windows,
Roboto on Android, San Francisco on watchOS. Always local, always fast. */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.55;
color: #2a2a2a;
background: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
/* Custom selection — warm Claude copper instead of browser default blue. */
::selection {
background: #f0d8bf;
color: #1a1a1a;
}
::-moz-selection {
background: #f0d8bf;
color: #1a1a1a;
}
img { display: block; max-width: 100%; image-orientation: from-image; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid #1a1a1a; outline-offset: 2px; }
h1, h2, h3 {
margin: 0;
color: #1a1a1a;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.005em;
}
p { margin: 0 0 1em; }
/* ---------- Shared inner-page shell ----------
Same 580px width as .essay-shell so reading/writing lists and essay
pages sit at the exact same horizontal position. Navigating between
them should feel like a content swap, not a layout shift. */
.shell {
max-width: 580px;
margin: 0 auto;
padding: 4rem 1.5rem 6rem;
}
.back {
display: inline-block;
margin-bottom: 2rem;
color: #9a9a9a;
font-size: 14px;
transition: color 160ms ease;
}
.back:hover { color: #1a1a1a; }
/* Mobile-only fixed-line-break trick.
Desktop: each .mbline is inline — the paragraph flows naturally and
the normal `text-align: justify` handles soft-wrapping.
Mobile: each .mbline becomes a block with `text-align-last: justify`
so every hard-broken line stretches edge-to-edge. The last line of
the paragraph (.mbline.last) stays left-aligned since justifying a
short last line produces huge gaps. */
.mbline { display: inline; }
@media (max-width: 720px) {
.mbline {
display: block;
text-align: justify;
text-align-last: justify;
}
.mbline.last { text-align-last: left; }
}
/* ---------- Landing ---------- */
.landing {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem 5rem; /* extra bottom pad keeps content above fixed now-widget */
}
.hero {
display: flex;
align-items: stretch;
gap: 2.5rem;
max-width: 680px;
}
.portrait {
align-self: stretch;
width: 170px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
background: #dcdcd8;
position: relative;
}
.portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.portrait.placeholder::after {
content: "portrait";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #9a9a9a;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.bio {
flex: 1;
min-width: 0;
font-size: 13.5px;
line-height: 1.55;
}
.bio .name {
font-size: 14.5px;
font-weight: 600;
margin: 0 0 0.85rem;
}
.bio .prose { max-width: 46ch; }
.bio .prose p {
margin: 0 0 0.7em;
font-size: 13.5px;
line-height: 1.6;
text-align: justify;
hyphens: manual;
-webkit-hyphens: manual;
}
.bio .prose p:last-child { margin-bottom: 0; }
.bio .prose a {
color: #2563eb;
text-decoration: none;
transition: opacity 160ms ease;
}
.bio .prose a:hover { opacity: 0.7; }
.socials {
list-style: none;
margin: 1.1rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.25rem;
font-size: 12px;
color: #9a9a9a;
}
.socials a { color: #9a9a9a; transition: color 160ms ease; }
.socials a:hover { color: #1a1a1a; }
.hero-nav {
flex-shrink: 0;
align-self: flex-start;
}
.hero-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.hero-nav a {
font-size: 13.5px;
color: #b5b5b5;
transition: color 160ms ease;
}
.hero-nav a:hover { color: #1a1a1a; }
/* ---------- Mobile: wide centered single column ----------
Portrait + centered name + justified bio + centered socials + divider
+ centered nav. Hero fills the viewport minus padding so the bio has
enough horizontal room for justified text without huge word gaps. */
@media (max-width: 720px) {
.landing {
align-items: center;
justify-content: flex-start;
padding: 3rem 1rem 5rem;
min-height: auto;
}
.hero {
flex-direction: column;
align-items: center;
gap: 1.5rem;
text-align: center;
width: 100%;
max-width: 520px;
margin: 0 auto;
}
.portrait { order: 1; }
.bio { order: 2; }
.hero-nav { order: 3; }
.portrait {
width: 220px;
align-self: center;
aspect-ratio: 4 / 5;
border-radius: 10px;
margin-bottom: 0.25rem;
}
.bio {
width: 260px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.bio .name {
text-align: center;
font-size: 14px;
margin: 0 0 0.85rem;
}
.bio .prose {
/* Wide enough that our manual
breaks are the
*only* things forcing line wraps — no soft-wrap from the edge. */
max-width: 100%;
width: 100%;
}
.bio .prose p {
text-align: justify;
hyphens: manual;
-webkit-hyphens: manual;
text-wrap: auto; /* no balance/pretty — manual breaks win */
font-size: 12.5px;
line-height: 1.6;
}
.socials {
justify-content: center;
gap: 0.5rem 1.5rem;
font-size: 13px;
margin-top: 1.25rem;
}
.hero-nav {
align-self: center;
width: 100%;
max-width: 360px;
margin-top: 1rem;
padding-top: 1.25rem;
border-top: 1px solid #eeeceb;
}
.hero-nav ul {
flex-direction: row;
gap: 2rem;
justify-content: center;
}
.hero-nav a {
font-size: 14px;
color: #6a6a6a;
}
}
/* ---------- Narrow phones (≤ 480px) ----------
Smaller text = more characters per line = less justify-slack per
space = smaller word gaps. Keeps alignment clean. */
@media (max-width: 480px) {
.landing { padding: 2.5rem 1.25rem 5rem; }
.hero { gap: 1.1rem; }
.portrait { width: 170px; }
.bio .name { font-size: 13.5px; }
.bio .prose p { font-size: 12px; line-height: 1.55; }
.socials { font-size: 11.5px; gap: 0.35rem 1rem; }
.hero-nav ul { gap: 1.5rem; }
.hero-nav a { font-size: 12.5px; }
}
/* ---------- Section pages (reading, writing) ---------- */
.section-header { margin-bottom: 2.5rem; }
.section-header h1 {
font-size: 17px;
font-weight: 600;
margin: 0;
}
.section-header .note {
font-size: 13px;
color: #9a9a9a;
line-height: 1.55;
margin: 0.6rem 0 0;
max-width: 52ch;
}
/* ---------- Project list (building page) ---------- */
.project-list {
list-style: none;
margin: 0;
padding: 0;
}
.project-list > li {
padding: 0 0 1.5rem;
}
.project-list .project-name {
font-size: 15px;
font-weight: 600;
margin: 0 0 0.35rem;
}
.project-list .project-name a {
color: #1a1a1a;
transition: color 160ms ease;
}
.project-list .project-name a:hover { color: #2563eb; }
.project-list .project-desc {
font-size: 14px;
color: #4a4a4a;
line-height: 1.55;
margin: 0 0 0.6rem;
max-width: 52ch;
}
.project-list .project-links {
margin: 0;
font-size: 13px;
}
.project-list .project-links a {
color: #2563eb;
transition: opacity 160ms ease;
}
.project-list .project-links a:hover { opacity: 0.7; }
/* ---------- Plain list (reading + writing indexes) ---------- */
.plain-list {
list-style: none;
margin: 0;
padding: 0;
}
.plain-list li {
padding: 0.35rem 0;
font-size: 14px;
color: #2a2a2a;
}
.plain-list a {
color: #1a1a1a;
transition: color 160ms ease;
}
.plain-list a:hover { color: #2563eb; }
/* ---------- Essay page (Paul Graham-style narrow reader) ---------- */
.essay-shell {
max-width: 580px;
margin: 0 auto;
padding: 4rem 1.5rem 6rem;
}
.essay-header { margin-bottom: 1.75rem; }
.essay-header h1 {
font-size: 20px;
font-weight: 700;
margin: 0 0 0.8rem;
line-height: 1.25;
color: #1a1a1a;
}
.essay-header .meta {
font-size: 14px;
color: #6a6a6a;
margin: 0;
font-variant-numeric: tabular-nums;
}
.essay-body {
font-size: 15px;
line-height: 1.55;
color: #1a1a1a;
}
.essay-body p { margin: 0 0 1.1em; }
.essay-body h1,
.essay-body h2,
.essay-body h3 {
font-size: 15px;
font-weight: 700;
color: #1a1a1a;
margin: 1.8em 0 0.4em;
}
.essay-body strong { color: #1a1a1a; font-weight: 700; }
.essay-body em { font-style: italic; }
.essay-body ul,
.essay-body ol {
margin: 0 0 1.1em;
padding-left: 1.4rem;
}
.essay-body li { margin-bottom: 0.35em; }
.essay-body hr {
border: 0;
border-top: 1px solid #e2e2e0;
margin: 2em auto;
width: 40%;
}
.essay-body blockquote {
border-left: 2px solid #d0cfc8;
margin: 1.4em 0;
padding: 0.1em 0 0.1em 1rem;
color: #555;
font-style: italic;
}
/* Narrow phone: reduce essay shell padding */
@media (max-width: 480px) {
.essay-shell { padding: 2.5rem 1.1rem 5rem; }
.essay-header h1 { font-size: 19px; }
}
/* ---------- Now widget (real-time city + local time) ---------- */
.now {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
color: #b5b5b5;
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 0.6rem;
white-space: nowrap;
pointer-events: none;
user-select: none;
z-index: 10;
}
.now-sep { color: #dcdcdc; }
.now-time { font-variant-numeric: tabular-nums; }
/* Hide the now widget on mobile — desktop-only. */
@media (max-width: 720px) {
.now { display: none; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}