@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* inter italic - latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/inter-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* inter italic - latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/inter-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* inter normal - latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* inter normal - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* newsreader italic - latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* newsreader italic - latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* newsreader normal - latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/newsreader-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* newsreader normal - latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/newsreader-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #161616;
  --secondary: #666666;
  --footer-ink: rgb(22 22 22 / 40%);
  --article-title-ink: #3d3d3d;
  --placeholder: #f1f1f1;
  --font-interface: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-editorial: "Newsreader", Georgia, "Times New Roman", serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --page-margin: 56px;
  --pair-gap: 24px;
  --row-gap: 80px;
  --navigation-gap: 28px;
  --type-body: 1rem;
  --type-secondary: 0.875rem;
  --type-heading: clamp(1.75rem, 1.5rem + 0.5vw, 2rem);
  --type-card-title: 1.5rem;
  --type-reading: 1.25rem;
  --leading-reading: 1.6;
  --project-index-gap: 48px;
  --journal-list-width: 860px;
  --journal-reading-width: 759px;
  --journal-image-width: 900px;
  --journal-portrait-width: 480px;
  --about-reading-width: 660px;
  --about-portrait-width: 400px;
  --journal-thumbnail-gap: 24px;
  --type-journal-meta: 0.8125rem;
  --rule: #e5e5e5;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--font-interface); font-optical-sizing: auto; font-synthesis: none; scrollbar-gutter: stable; }
body { margin: 0; font-size: var(--type-body); font-weight: var(--weight-regular); line-height: 1.5; }
/* Short public pages fill the viewport; long pages keep the footer after content. */
body { --editorial-scale: 1; }
body:not(.editor-app) { --editorial-scale: 1.08; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
a { color: var(--secondary); font-family: inherit; text-decoration: none; }
summary { color: var(--secondary); }
a:hover, a:focus-visible, a:active, a[aria-current],
summary:hover, summary:focus-visible, summary:active, details[open] > summary { color: var(--ink); }
a:focus-visible, summary:focus-visible, main:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

/* Shared editorial and interface roles also apply to future Journal, About and Contact pages. */
h1, h2, h3, h4, h5, h6, .project-cover-title, .journal-entry-title {
  font-family: var(--font-editorial);
  font-optical-sizing: auto;
  overflow-wrap: anywhere;
}
h1, .project-cover-title, .journal-entry-title { font-weight: var(--weight-regular); }
h1 { margin: 0; font-size: calc((var(--type-heading)) * var(--editorial-scale)); line-height: 1.2; }
h2, h3, h4, h5, h6 { margin: 1.5em 0 0.6em; font-weight: var(--weight-medium); line-height: 1.3; }
h2 { font-size: calc((1.5rem) * var(--editorial-scale)); }
h3 { font-size: calc((1.25rem) * var(--editorial-scale)); }
h4, h5, h6 { font-size: calc((1.125rem) * var(--editorial-scale)); }
article, .editorial-text, .project-text, .about-biography {
  font-family: var(--font-editorial);
  font-optical-sizing: auto;
  font-size: calc((var(--type-reading)) * var(--editorial-scale));
  font-weight: var(--weight-regular);
  line-height: var(--leading-reading);
  overflow-wrap: anywhere;
}
.editorial-text, .project-text, .about-biography { max-width: 60ch; }
:where(article, .editorial-text, .project-text, .about-biography) p { margin: 0 0 1em; }
:where(article, .editorial-text, .project-text, .about-biography) p:last-child { margin-bottom: 0; }
:where(article, .editorial-text, .project-text, .about-biography) :is(em, i), blockquote, q {
  font-family: var(--font-editorial);
  font-style: italic;
}
blockquote { margin: 1.5em 0; }
strong, b { font-weight: var(--weight-medium); }
nav, .preview-note, .placeholder,
.card-summary, .project-status, .journal-summary, figcaption, time, .metadata, .caption, .credits,
address, .contact-details, .helper-text {
  font-family: var(--font-interface);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  font-style: normal;
  line-height: 1.5;
}
figcaption, time, .metadata, .caption, .credits, .helper-text { font-size: var(--type-secondary); }
nav a[aria-current] { font-weight: var(--weight-medium); }
button, input, select, textarea, label, summary, .button {
  font-family: var(--font-interface);
  font-size: var(--type-body);
  font-style: normal;
  line-height: 1.5;
}
button, label, summary, .button, input:is([type="button"], [type="submit"], [type="reset"]) { font-weight: var(--weight-medium); }
input, select, textarea, input::placeholder, textarea::placeholder { font-family: var(--font-interface); font-weight: var(--weight-regular); }
button, input, select, textarea { max-width: 100%; min-width: 0; }
.frame { width: 100%; max-width: calc(1100px + 2 * var(--page-margin)); margin-inline: auto; padding-inline: var(--page-margin); }
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 40px;
  flex-shrink: 0;
  padding-block: 16px;
  margin-bottom: 64px;
  background: var(--paper);
}
@media (max-width: 799px) {
  .site-header { padding-block: 10px; margin-bottom: 40px; }
}
.site-name, .main-navigation a, .nav-unavailable {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.5;
  white-space: nowrap;
}
.site-name, .site-footer { font-family: var(--font-editorial); }
.site-name { flex-shrink: 0; max-width: 100%; white-space: normal; font-size: calc((1.2rem) * var(--editorial-scale)); font-weight: var(--weight-medium); }
.site-header nav { min-width: 0; }
.main-navigation { display: flex; flex-wrap: wrap; gap: 0 var(--navigation-gap); list-style: none; padding: 0; margin: 0; }
/* Reserve the active label's width so changing sections cannot move the links. */
.main-navigation li { display: grid; align-items: center; }
.main-navigation li::before {
  content: attr(data-label);
  grid-area: 1 / 1;
  visibility: hidden;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  pointer-events: none;
}
.main-navigation li > a, .main-navigation li > .nav-unavailable { grid-area: 1 / 1; }
.nav-unavailable { color: var(--secondary); cursor: default; }
.preview-note { margin: 0 0 20px; color: var(--secondary); font-size: var(--type-secondary); }
.selected-work { display: grid; gap: var(--row-gap); }
.photograph-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pair-gap); align-items: start; }
.photograph-row--pair { grid-template-columns: var(--columns); }
.photograph { display: block; width: 100%; min-width: 0; height: auto; }
.placeholder { display: grid; place-items: center; background: var(--placeholder); color: var(--secondary); }
.placeholder p { margin: 24px; text-align: center; font-size: var(--type-secondary); }
.placeholder span { display: block; margin-top: 4px; }
.site-footer { margin-top: auto; padding-top: 64px; padding-bottom: 32px; color: var(--footer-ink); font-size: calc((var(--type-secondary)) * var(--editorial-scale)); }
.site-footer p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: 10px; left: var(--page-margin); z-index: 20; padding: 10px 14px; background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

/* Projects: one representative cover per series, then a contextual reading layout. */
.projects-heading { margin-bottom: 32px; }
.projects-heading .preview-note { margin: 12px 0 0; }
.project-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px var(--project-index-gap); list-style: none; padding: 0; margin: 0; }
.project-cover-link { display: block; }
.project-cover { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.project-cover .photograph { width: 100%; height: 100%; min-height: 0; aspect-ratio: 4 / 3 !important; object-fit: cover; object-position: center; }
.project-cover-title, .journal-entry-title { font-size: calc((var(--type-card-title)) * var(--editorial-scale)); line-height: 1.25; }
h1.journal-entry-title { font-size: calc((var(--type-heading)) * var(--editorial-scale)); line-height: 1.2; }
.project-cover-title { display: block; margin-top: 10px; font-family: var(--font-interface); font-size: 1.125rem; font-weight: var(--weight-regular); }
.project-cover-year { display: block; margin-top: 4px; font-family: var(--font-interface); font-size: var(--type-secondary); line-height: 1.5; color: var(--secondary); }
.project-status { display: block; margin: 6px 0 0; color: var(--secondary); font-size: var(--type-secondary); }
.project-cover-link .project-status { color: inherit; }
.project-main { min-width: 0; }
.project-introduction { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.project-introduction--with-description { border-bottom: 0; padding-bottom: 0; }
.project-heading { display: block; max-width: var(--journal-reading-width); }
.project-heading h1 { font-family: var(--font-interface); font-size: clamp(1.625rem, 1.375rem + 0.5vw, 1.75rem); font-weight: var(--weight-regular); margin: 0; }
.project-year { margin: 6px 0 0; font-family: var(--font-interface); font-size: var(--type-secondary); color: var(--secondary); }
.project-text {
  max-width: 100%;
  margin-top: 12px;
  font-family: var(--font-editorial);
  font-size: calc((var(--type-body)) * var(--editorial-scale));
}
.project-text :is(em, i, blockquote, q) { font-family: inherit; }
.project-text--placeholder { color: var(--secondary); }
.project-text.project-description { font-size: var(--type-body); max-width: none; margin: -8px 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); font-family: var(--font-interface); }
.project-description > p { max-width: var(--journal-reading-width); }
.project-gallery .photograph-row:not(.photograph-row--pair) { justify-items: start; }
.portfolio-figure { margin: 0; width: 100%; min-width: 0; }
.portfolio-figure figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--secondary); overflow-wrap: anywhere; }
.portfolio-credit { display: block; }
.project-end-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; margin-top: 56px; }
.project-end-navigation a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; overflow-wrap: anywhere; }
.project-end-navigation .next-project { text-align: right; }
.project-end-navigation .all-projects { text-align: center; }
.project-end-navigation span { font-size: var(--type-secondary); margin-bottom: 4px; }

/* Journal: left-aligned listings and reading columns with wider photographs. */
.journal-index > * { max-width: var(--journal-list-width); }
.journal-index > h1 { margin-bottom: 0; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.journal-list { list-style: none; padding: 0; margin: 0; }
.journal-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--journal-thumbnail-gap); align-items: start; padding-block: 24px; }
.journal-row + .journal-row { border-top: 1px solid var(--rule); }
.journal-row-text { grid-column: 2; min-width: 0; }
.journal-row--text-only .journal-row-text { grid-column: 1 / -1; }
.journal-thumbnail { display: block; aspect-ratio: 3 / 2; }
.journal-thumbnail .photograph { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.journal-thumbnail:hover { opacity: 0.9; }
.journal-list-title { margin: 0; font-size: calc((1.5rem) * var(--editorial-scale)); font-weight: var(--weight-regular); line-height: 1.2; }
.journal-list-title a { color: var(--article-title-ink); }
.journal-list-title a:is(:hover, :focus-visible, :active) { color: var(--ink); }
.article-category { margin: 16px 0 0; font-family: var(--font-interface); font-size: 0.75rem; font-weight: var(--weight-medium); font-style: normal; line-height: 1.5; letter-spacing: 0.075em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.journal-date { display: block; margin-top: 12px; font-size: var(--type-journal-meta); color: var(--secondary); }
.journal-row .journal-date { font-size: 0.75rem; margin-top: 16px; }
.journal-row .article-category + .journal-date { margin-top: 2px; }
.journal-excerpt { margin: 10px 0 0; font-family: var(--font-editorial); font-size: calc((1rem) * var(--editorial-scale)); font-weight: var(--weight-regular); line-height: 1.45; color: var(--secondary); overflow-wrap: anywhere; }
.journal-excerpt + .article-category, .journal-row .journal-excerpt + .journal-date { margin-top: 10px; }
.journal-empty { margin: 24px 0 0; font-family: var(--font-interface); color: var(--secondary); }
.journal-demo-note { max-width: var(--journal-reading-width); margin: 0 0 32px; }
.journal-index .journal-demo-note { max-width: var(--journal-list-width); margin: 24px 0 0; }
.journal-preview-link { margin-top: 32px; }
.journal-pagination, .journal-entry-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.journal-pagination { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--rule); }
.journal-pagination a, .journal-entry-navigation a { min-height: 44px; display: flex; flex-direction: column; justify-content: center; overflow-wrap: anywhere; font-weight: var(--weight-regular); }
.journal-older, .journal-next { grid-column: 2; text-align: right; }
.journal-entry-header, .journal-entry-navigation { max-width: var(--journal-reading-width); margin-inline: 0; }
.journal-entry-header { margin-bottom: 36px; }
.journal-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 32px; font-family: var(--font-interface); font-size: 0.875rem; font-weight: var(--weight-regular); }
.journal-title { font-size: calc((clamp(2rem, 1.5rem + 1vw, 2.375rem)) * var(--editorial-scale)); line-height: 1.15; font-weight: var(--weight-regular); }
.journal-body { font-size: calc((1.125rem) * var(--editorial-scale)); line-height: 1.55; }
.journal-entry-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-top: 24px; padding-block: 10px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.journal-entry-meta .journal-date, .journal-entry-meta .article-category { margin: 0; }
.journal-entry-meta .article-category { text-align: right; margin-left: auto; }
.journal-body > :not(figure) { max-width: var(--journal-reading-width); margin-inline: 0; }
.journal-body > p { margin-bottom: 1.4em; }
.journal-body > :last-child { margin-bottom: 0; }
.journal-body > h2, .journal-body > h3, .journal-body > h4 { margin-top: 1.6em; }
.journal-body > :first-child { margin-top: 0; }
.journal-body > ul, .journal-body > ol { padding-left: 1.3em; margin-block: 1.2em; }
.journal-body li { padding-left: 0.15em; margin-bottom: 0.45em; }
.journal-body > blockquote { margin-block: 1.5em; }
.journal-quote-credit { display: block; margin-top: 12px; font-family: var(--font-interface); font-size: var(--type-journal-meta); font-style: normal; color: var(--secondary); }
.journal-figure { width: 100%; max-width: var(--journal-image-width); margin: 40px 0; }
.journal-figure--portrait { max-width: var(--journal-portrait-width); }
.journal-figure--square { max-width: var(--journal-reading-width); }
.journal-figure .photograph { height: auto; }
.journal-figure figcaption { margin-top: 10px; font-size: var(--type-journal-meta); color: var(--secondary); }
.journal-credit { display: block; }
.journal-entry-navigation { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); }
.journal-entry-navigation span { margin-bottom: 6px; font-size: var(--type-journal-meta); }

/* About stays a single biography column, with an optional uncropped photograph. */
.about-title, .contact-title { max-width: var(--about-reading-width); margin-bottom: 32px; }
.about-page .about-biography {
  max-width: var(--journal-reading-width);
  font-family: var(--font-interface);
  font-size: var(--type-body);
}
.about-biography :is(em, i, q) { font-family: inherit; }
.about-biography > p { margin-bottom: 1.2em; }
.about-biography > :last-child { margin-bottom: 0; }
.about-biography > :first-child { margin-top: 0; }
.about-placeholder { color: var(--secondary); }
.about-photograph { width: 100%; max-width: var(--about-reading-width); margin: 36px 0 0; }
.about-photograph--portrait { max-width: var(--about-portrait-width); }
.about-photograph .photograph { height: auto; }
.about-photograph figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--secondary); }
.about-credit { display: block; }

/* Contact shares About's left edge and heading rhythm. */
.contact-details { max-width: var(--about-reading-width); margin: 0; }
.about-page .contact-details { margin-top: 1.2em; font-style: italic; }
.contact-email {
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: #b3b3b3;
}
.contact-email:hover, .contact-email:focus-visible, .contact-email:active { text-decoration-color: currentColor; }

@media (max-width: 1023px) {
  :root { --page-margin: 32px; --pair-gap: 18px; --row-gap: 56px; --navigation-gap: 22px; }
  .site-header { flex-wrap: wrap; }
  :root { --project-index-gap: 32px; }
}

@media (max-width: 899px) {
  .project-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 799px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 639px) {
  :root { --page-margin: 20px; --pair-gap: 32px; --row-gap: 32px; --navigation-gap: 20px; --type-reading: 1.1875rem; }
  .photograph-row--pair { grid-template-columns: minmax(0, 1fr); }
  .preview-note { margin-bottom: 16px; }
  .site-footer { padding-top: 40px; padding-bottom: 24px; }
  .project-index { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .projects-heading { margin-bottom: 24px; }
  .project-introduction { margin-bottom: 24px; }
  .project-text { margin-top: 12px; }
  .project-end-navigation { margin-top: 36px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .project-end-navigation > span { display: none; }
  .project-end-navigation a { text-align: left; padding-block: 8px; border-top: 1px solid var(--rule); }
  .project-end-navigation .all-projects { text-align: left; }
  .project-end-navigation .next-project { text-align: left; }
  .journal-row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding-block: 24px; }
  .journal-row-text { grid-column: 1; }
  .journal-list-title { font-size: calc((1.375rem) * var(--editorial-scale)); }
  .journal-title { font-size: calc((1.75rem) * var(--editorial-scale)); }
  .journal-entry-header { margin-bottom: 28px; }
  .journal-back { margin-top: 24px; }
  .journal-figure { margin-block: 32px; }
  .journal-entry-navigation { margin-top: 40px; }
  .about-title, .contact-title { margin-bottom: 28px; }
  .about-photograph { margin-bottom: 28px; }
}

@media (min-width: 800px) {
  .site-header { flex-wrap: wrap; }
}

@media (min-width: 640px) {
  .project-gallery .photograph-row--portrait { width: calc((100% - var(--pair-gap)) / 2); }
}

/* Portfolio viewer: native modal focus management, uncropped screen-fit images. */
.photograph-open { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: zoom-in; }
.photo-lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 56px 64px; border: 0; background: rgba(15, 15, 15, 0.94); color: #fff; }
.photo-lightbox::backdrop { background: transparent; }
.photo-lightbox[open] { display: grid; place-items: center; }
.photo-lightbox .lightbox-image { display: block; max-width: 100%; max-height: calc(100dvh - 112px); width: auto; height: auto; object-fit: contain; }
.photo-lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; padding: 0; background: transparent; color: #fff; cursor: pointer; font: 36px/1 Arial, sans-serif; }
.photo-lightbox button[hidden] { display: none; }
.photo-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.lightbox-close { top: 8px; right: 8px; }
.lightbox-prev { top: calc(50% - 24px); left: 8px; }
.lightbox-next { top: calc(50% - 24px); right: 8px; }
.lightbox-status { position: absolute; bottom: 12px; left: 16px; right: 16px; margin: 0; text-align: center; color: #ddd; font: 13px/1.5 var(--font-interface); }
@media (max-width: 639px) {
  .photo-lightbox { padding: 56px 12px; }
  .photo-lightbox .lightbox-prev, .photo-lightbox .lightbox-next { top: auto; bottom: 0; }
  .lightbox-status { left: 60px; right: 60px; }
}