:root {
  --bg: #eef1f0;
  --bg-card: #e4eae8;
  --text: #1e2b28;
  --text-muted: #52706a;
  --accent: #3a7d6e;
  --accent-soft: #7db8ae;
  --border: #a8c4be;
  --max: 1060px;
}

* { box-sizing: border-box; }
html { font-size: 17px; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Lora, Georgia, serif; font-size: 1rem; line-height: 1.7; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent); }
p, li { text-align: justify; hyphens: auto; }
.shell { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 5; background: var(--text); color: var(--bg); padding: .5rem .8rem; }
.skip-link:focus { top: 1rem; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 2rem 1.5rem; border-bottom: 2px solid var(--accent-soft); }
.wordmark { font-size: 1.15rem; font-weight: 600; letter-spacing: -.025em; text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--accent); }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1.35rem; font-family: "Source Code Pro", monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.site-nav a { color: var(--text-muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }
.menu-button { display: none; background: none; border: 0; padding: .45rem 0 .45rem .6rem; cursor: pointer; }
.menu-button span { display: block; width: 24px; height: 1px; margin: 5px 0; background: var(--text); }

.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(15rem, .75fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem); padding-block: clamp(4.5rem, 10vw, 7.5rem) clamp(3.5rem, 8vw, 6rem); }
.hero-content { min-width: 0; }
.eyebrow, .section-label { margin: 0 0 1.25rem; color: var(--text-muted); font-family: "Source Code Pro", monospace; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.hero h1, .page-hero h1, .contact h1 { max-width: 800px; margin: 0; font-size: clamp(2.35rem, 5.8vw, 5rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; }
.hero-copy { max-width: 610px; margin-top: 2rem; color: var(--text-muted); }
.hero-copy p { margin: 0 0 1rem; }
.hero-portrait { margin: 0; border: 1px solid var(--accent); background: var(--bg-card); padding: clamp(.45rem, 1vw, .75rem); box-shadow: clamp(.35rem, 1vw, .7rem) clamp(.35rem, 1vw, .7rem) 0 var(--accent-soft); }
.hero-portrait img { display: block; width: 100%; max-height: 38rem; object-fit: cover; object-position: center; }

.home-links { border-top: 1px solid var(--border); padding-bottom: 5rem; }
.home-links a { position: relative; display: grid; grid-template-columns: 4.5rem minmax(11rem, 1fr) minmax(12rem, .8fr) auto; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--border); padding: 1.35rem .35rem; color: var(--text); text-decoration: none; transition: background .16s ease, padding .16s ease; }
.home-links a:hover { background: var(--bg-card); padding-inline: 1rem; }
.home-links span, .home-links em { color: var(--text-muted); font-family: "Source Code Pro", monospace; font-size: .7rem; font-style: normal; letter-spacing: .04em; }
.home-links strong { font-size: 1.28rem; font-weight: 500; }
.home-links b { color: var(--accent); font-size: 1.25rem; font-weight: 400; }
.link-arrow { font-variant-emoji: text; }

.page-hero { padding-block: 5.5rem 3rem; border-bottom: 1px solid var(--border); }
.page-hero h1, .contact h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.page-hero > p:last-child { max-width: 570px; margin: 1.25rem 0 0; color: var(--text-muted); }
.archive { padding-block: 2rem 5rem; }
.section-label { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.section-label span { color: var(--text); }
.content-list { margin: 0; padding: 0; list-style: none; }
.content-list li { border-bottom: 1px solid var(--border); }
.content-list a { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1.5rem .3rem; text-decoration: none; transition: background .16s ease, padding .16s ease; }
.content-list a:hover { background: var(--bg-card); padding-inline: 1rem; }
.content-date { color: var(--text-muted); font-family: "Source Code Pro", monospace; font-size: .67rem; letter-spacing: .03em; }
.content-list h2 { margin: 0; font-size: 1.35rem; font-weight: 500; line-height: 1.25; }
.content-list p { grid-column: 2 / 3; margin: .4rem 0 0; color: var(--text-muted); font-size: .91rem; }
.content-list b { color: var(--accent); font-size: 1.2rem; font-weight: 400; }
.content-list b, .back-link .link-arrow { font-variant-emoji: text; }
.list-empty { color: var(--text-muted); }

.post { width: min(calc(100% - 3rem), 760px); margin: 0 auto; padding-block: 5.5rem 5rem; }
.post-header { padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.post-header h1 { margin: 0; font-size: clamp(2.35rem, 5vw, 4.2rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.1; }
.post-subtitle { margin: 1rem 0 0; color: var(--text-muted); font-size: 1.15rem; }
.post-date { margin: 1.5rem 0 0; color: var(--text-muted); font-family: "Source Code Pro", monospace; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.post-body { padding-top: 2.5rem; }
.post-body p, .post-body li { font-size: 1.08rem; }
.post-body h2, .post-body h3, .post-body h4, .post-body h5 { margin: 2.6rem 0 1rem; font-weight: 500; line-height: 1.2; }
.post-body h2 { font-size: 1.8rem; }.post-body h3 { font-size: 1.35rem; }.post-body h4 { font-size: 1.12rem; }.post-body h5 { color: var(--text-muted); font-family: "Source Code Pro", monospace; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; }
.project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.project-list li { border: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.project-list a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; gap: 0; height: 100%; padding: 0; }
.project-list a:hover { padding: 0; background: var(--bg-card); }
.project-thumbnail { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--border); transition: filter .2s ease, transform .2s ease; }
.project-list a:hover .project-thumbnail { filter: saturate(1.1); transform: scale(1.015); }
.project-list .content-date { grid-column: 1; margin: 1.25rem 1.25rem .4rem; }
.project-list .content-copy { grid-column: 1; grid-row: 3; }
.project-list h2 { margin: 0 1.25rem; font-size: 1.5rem; }
.project-list p { margin: .55rem 1.25rem 1.4rem; }
.project-list b { grid-column: 2; grid-row: 2 / span 2; align-self: center; margin: 0 1.25rem; }
.post-body blockquote { position: relative; margin: 3rem 0; padding: 1.3rem 1.5rem 1.2rem 2.25rem; border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--bg-card); color: var(--text); }
.post-body blockquote::before { position: absolute; z-index: 0; top: -.65rem; left: 1.05rem; color: var(--accent); background: transparent; content: "“"; font-size: 3.4rem; font-style: normal; line-height: 1; }
.post-body blockquote p { position: relative; z-index: 1; margin: 0; font-size: 1.2rem; line-height: 1.55; font-style: italic; text-align: left; }
.post-body blockquote p + p { margin-top: 1rem; }
.post-body blockquote cite { position: relative; z-index: 1; display: block; margin-top: 1rem; color: var(--text-muted); font-family: "Source Code Pro", monospace; font-size: .72rem; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.post-body code { border-radius: 2px; background: var(--bg-card); padding: .12em .35em; font-family: "Source Code Pro", monospace; font-size: .85em; }
.post-body img { display: block; width: 100%; height: auto; margin: 2rem 0; border: 1px solid var(--border); }
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 2rem 0; background: var(--bg-card); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.back-link { display: inline-block; margin-top: 3rem; color: var(--accent); font-family: "Source Code Pro", monospace; font-size: .75rem; }

.contact { min-height: 56vh; padding-block: 6rem; }.contact > p:not(.eyebrow) { max-width: 570px; margin: 1.5rem 0 0; font-size: 1.15rem; }.contact-note { color: var(--text-muted); font-size: .85rem !important; }
.contact-form { width: min(100%, 42rem); margin-top: 3rem; padding-top: 2.25rem; border-top: 1px solid var(--border); }.contact-form__field { display: grid; gap: .55rem; margin-bottom: 1.35rem; }.contact-form label { font-family: "Source Code Pro", monospace; font-size: .73rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 0; padding: .8rem .9rem; background: transparent; color: var(--text); font: 1rem/1.45 Lora, Georgia, serif; }.contact-form textarea { min-height: 10rem; resize: vertical; }.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: var(--accent); }.contact-form__error, .contact-form__status { color: var(--accent); font-family: "Source Code Pro", monospace; font-size: .72rem; line-height: 1.45; }.contact-form__error:empty, .contact-form__status p:empty { display: none; }.contact-form__status { margin-top: 1.25rem; }.contact-form__status p { margin: 0; text-align: left; }.contact-form__submit { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.5rem; padding: .85rem 1.05rem; border: 0; background: var(--text); color: var(--bg); cursor: pointer; font-family: "Source Code Pro", monospace; font-size: .76rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: background .2s ease, opacity .2s ease; }.contact-form__submit:hover, .contact-form__submit:focus-visible { background: var(--accent); }.contact-form__submit:disabled { cursor: wait; opacity: .65; }
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; border-top: 1px solid var(--border); padding-block: 1.5rem 2rem; }.site-footer p { justify-self: end; margin: 0; color: var(--text-muted); font-family: "Source Code Pro", monospace; font-size: .68rem; letter-spacing: .04em; }.footer-social { display: flex; gap: .5rem; }.footer-social a { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; transition: background .16s ease, border-color .16s ease, color .16s ease; }.footer-social a:hover, .footer-social a:focus-visible { border-color: var(--accent); background: var(--accent); color: var(--bg); }.footer-social i { font-size: .95rem; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 720px) { .site-header { position: relative; gap: 1rem; }.menu-button { display: block; }.site-nav { display: none; position: absolute; top: calc(100% + 1px); right: 0; left: 0; z-index: 2; padding: 1rem 1.5rem 1.25rem; background: var(--bg); border-bottom: 2px solid var(--accent-soft); flex-direction: column; align-items: flex-start; }.site-nav.is-open { display: flex; }.hero { grid-template-columns: 1fr; gap: 2.5rem; }.hero-portrait { justify-self: center; width: min(78vw, 20rem); }.home-links a { grid-template-columns: 2.5rem 1fr auto; }.home-links em { display: none; }.content-list a { grid-template-columns: 1fr auto; }.content-date { grid-column: 1; }.content-list h2 { grid-column: 1; }.content-list p { grid-column: 1; }.content-list b { grid-column: 2; grid-row: 1 / span 3; }.project-list { grid-template-columns: 1fr; }.project-list a { grid-template-columns: 1fr auto; }.project-list .content-date, .project-list .content-copy { grid-column: 1; }.project-list b { grid-column: 2; grid-row: 2 / span 2; }.section-label { display: block; }.section-label span { display: block; margin-bottom: .25rem; }.site-footer { display: flex; flex-wrap: wrap; align-items: center; }.site-footer p { margin-left: auto; }.footer-social { order: 3; width: 100%; } }
@media (max-width: 480px) { html { font-size: 16px; }.shell { width: min(calc(100% - 2rem), var(--max)); }.home-links a { padding-block: 1.1rem; }.home-links strong { font-size: 1.08rem; }.post { width: min(calc(100% - 2rem), 760px); }.post-body p, .post-body li { font-size: 1rem; } }