:root {
  color-scheme: light;
  --paper: #fcfcfc;
  --ink: #32302f;
  --muted: #68635e;
  --sand: #e1dcd0;
  --blue: #c6d4dd;
  --line: #dedbd6;
  --green: #52644d;
  --nav: #f0efec;
  --nav-glass: rgb(247 247 247 / .8);
  --nav-hover: #e5e3de;
  --nav-active: #fff;
  --travel-band: #edf1f3;
  --pending: #f2f1ed;
  --timeline-line: #bcb6aa;
  --timeline-label: #5e584e;
  --art-mountain: #d9ddd2;
  --art-mountain-ink: #5b6955;
  --art-city-ink: #556977;
  --art-desert: #e6d5c3;
  --art-desert-ink: #8a6e54;
  --art-coast: #d4dedc;
  --art-coast-ink: #5c7470;
  --heading: 'Poppins', sans-serif;
  --body: 'Inter', sans-serif;
  --text-body: 1rem;
  --text-small: .875rem;
  --text-link: .875rem;
  --text-link-small: .8125rem;
  --text-caption: .8125rem;
  --text-label: .6875rem;
  --title-large: 1.6rem;
  --title-medium: 1.4rem;
  --title-small: 1.2rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1e201e;
  --ink: #ede9e2;
  --muted: #b8b4ac;
  --sand: #34352e;
  --blue: #29373e;
  --line: #43453f;
  --green: #b3c5a6;
  --nav: #292c28;
  --nav-glass: rgb(41 44 40 / .82);
  --nav-hover: #383d36;
  --nav-active: #454b41;
  --travel-band: #252d31;
  --pending: #292b26;
  --timeline-line: #65685a;
  --timeline-label: #c6c4b7;
  --art-mountain: #30392e;
  --art-mountain-ink: #b9c8ae;
  --art-city-ink: #b9cfdb;
  --art-desert: #40352b;
  --art-desert-ink: #d5b99b;
  --art-coast: #2c3a37;
  --art-coast-ink: #b2cbc4;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 8rem; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1rem/1.65 var(--body); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
::selection { background: var(--blue); color: var(--ink); }
h1, h2, h3, p, figure { margin: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--heading); font-weight: 600; line-height: 1.16; text-wrap: balance; }
h1 { font-size: clamp(3.4rem, 7.8vw, 7rem); letter-spacing: -.065em; }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); letter-spacing: -.045em; }
h3 { letter-spacing: -.025em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; border-radius: 3px; }
#main:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: min(1160px, calc(100% - 112px)); margin-inline: auto; }
.eyebrow { font-size: var(--text-label); font-weight: 600; letter-spacing: .15em; line-height: 1.7; text-transform: uppercase; }
.arrow { width: 23px; height: 23px; flex: 0 0 auto; transition: transform .2s ease; }
.direction-arrow { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.125em; }
.external-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.125em; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: var(--text-link); font-weight: 500; line-height: 1.6; }
.text-link:hover .arrow, .pill-link:hover .arrow { transform: translateX(4px); }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.pill-link { display: inline-flex; justify-content: center; align-items: center; gap: 28px; border: 1px solid var(--ink); border-radius: 100px; padding: 15px 23px; font-size: var(--text-link); font-weight: 500; transition: background .2s ease; }
.pill-link:hover { background: var(--sand); }
.skip-link { position: fixed; top: 12px; left: 12px; padding: 12px 20px; z-index: 20; background: var(--ink); color: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

/* The small capsule and quiet palette carry through from version one. */
.site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 114px; padding-block: 30px; }
.theme-toggle { grid-column: 1; grid-row: 1; justify-self: start; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid transparent; border-radius: 50%; transition: background .2s ease; }
.theme-toggle:hover { background: var(--nav); }
.theme-toggle svg { width: 22px; height: 22px; }
.theme-icon-sun, [data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
.navigation { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 4px; padding: 6px; background: var(--nav); border-radius: 100px; transition: background .2s ease; }
.navigation a { border-radius: 100px; padding: 10px 23px; font-size: var(--text-link-small); font-weight: 500; transition: background .2s ease; }
.navigation a:hover { background: var(--nav-hover); }
.navigation a[aria-current] { position: relative; isolation: isolate; }
.navigation-highlight { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--nav-active); box-shadow: 0 1px 4px #32302f09; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  :root { view-transition-name: none; }
  .navigation a:nth-child(1) { view-transition-name: navigation-home; }
  .navigation a:nth-child(2) { view-transition-name: navigation-about; }
  .navigation a:nth-child(3) { view-transition-name: navigation-writing; }
  .navigation a:nth-child(4) { view-transition-name: navigation-travel; }
  .navigation-highlight { view-transition-name: navigation-highlight; }
  ::view-transition-group(*) { animation-duration: 220ms; }
  ::view-transition-group(navigation-home), ::view-transition-group(navigation-about), ::view-transition-group(navigation-writing), ::view-transition-group(navigation-travel) { z-index: 1; }
  ::view-transition-group(navigation-highlight) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  ::view-transition-old(navigation-highlight), ::view-transition-new(navigation-highlight) { animation: none; mix-blend-mode: normal; }
}
.header-contact { grid-column: 3; grid-row: 1; justify-self: end; font-size: var(--text-link-small); }
.header-contact:hover { text-decoration: underline; text-underline-offset: 5px; }
.header-contact .external-icon { margin-left: 7px; }
.site-header.is-scrolled .navigation { background: var(--nav); }
@supports ((backdrop-filter: blur(15px)) or (-webkit-backdrop-filter: blur(15px))) {
  .site-header.is-scrolled .navigation { background: var(--nav-glass); -webkit-backdrop-filter: blur(15px) saturate(1.7); backdrop-filter: blur(15px) saturate(1.7); }
}

.home-hero { display: grid; grid-template-columns: 1.45fr 1fr; align-items: center; gap: 90px; padding-block: 85px 130px; }
.hero-copy > .eyebrow { margin-bottom: 26px; }
.home-hero h1 { font-size: clamp(3.55rem, 8.2vw, 7.1rem); line-height: 1.08; white-space: nowrap; }
[data-wave-title] { position: relative; }
.wave-word { display: inline-block; white-space: nowrap; }
.wave-letter { display: inline-block; white-space: pre; transform: translateY(var(--wave-lift, 0px)); transition: transform 160ms cubic-bezier(.2, .7, .2, 1); }
.title-dot { color: var(--green); }
.hero-description { font: 500 clamp(1.45rem, 2.7vw, 2.25rem)/1.5 var(--body); letter-spacing: -.045em; margin-top: 30px; }
.hero-typewriter { position: relative; padding-right: 44px; }
.typewriter-visual { display: flex; align-items: baseline; gap: .28em; min-width: 0; }
.typewriter-lead { flex-shrink: 0; }
.typewriter-slot { display: grid; min-width: 0; white-space: nowrap; }
.typewriter-reserve, .typewriter-line { grid-area: 1 / 1; min-width: 0; }
.typewriter-reserve { visibility: hidden; user-select: none; pointer-events: none; }
.typewriter-reserve::after { content: ''; display: inline-block; width: 6px; }
.typewriter-cursor { display: inline-block; width: 2px; height: .9em; background: var(--green); margin-left: 4px; vertical-align: -.05em; animation: cursor-blink 1s steps(1) infinite; }
.typewriter-toggle { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 44px; height: 44px; padding: 12px; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 50%; }
.typewriter-toggle:hover { background: var(--nav); color: var(--ink); }
.typewriter-toggle svg { width: 18px; height: 18px; }
.typewriter-play, [data-paused="true"] .typewriter-pause { display: none; }
[data-paused="true"] .typewriter-play { display: block; }
@keyframes cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.hero-note { color: var(--muted); font-size: var(--text-body); max-width: 420px; margin-top: 24px; line-height: 1.75; }
.hero-copy .pill-link { margin-top: 30px; }
.hero-photo { position: relative; align-self: center; padding-top: 15px; }
.hero-photo picture { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 220px 220px 16px 16px; background: var(--sand); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.hero-photo figcaption { color: var(--muted); font-size: var(--text-caption); text-align: center; padding-top: 18px; transform: rotate(-3deg); }
.hero-photo figcaption .direction-arrow { font-size: 1.6rem; vertical-align: middle; margin-left: 8px; }
.section-band { padding-block: 90px; }
.home-career { background: var(--sand); }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: start; }
.split-section h2 { margin-top: 0; }
.section-description { max-width: 450px; color: var(--muted); line-height: 1.75; font-size: var(--text-body); }
.split-section .section-description { margin-top: 24px; }
.split-section .text-link { margin-top: 28px; }
.career-preview { list-style: none; padding: 4px 0 0 32px; margin: 0; }
.career-preview li { position: relative; padding: 0 0 36px 32px; border-left: 1px solid var(--timeline-line); }
.career-preview li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline-marker { position: absolute; left: -6px; top: 4px; width: 11px; height: 11px; background: var(--ink); border: 3px solid var(--sand); outline: 1px solid var(--ink); border-radius: 50%; }
.career-preview .eyebrow { color: var(--timeline-label); }
.career-preview h3 { font-size: var(--title-medium); margin-top: 11px; }
.career-preview li > p:last-child { font-size: var(--text-small); color: var(--muted); margin-top: 8px; }
.section-space { padding-block: 100px; }
.section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.section-heading h2 { margin-top: 0; }
.section-heading .eyebrow + h2 { margin-top: 15px; }
.section-heading > .text-link { flex-shrink: 0; padding-bottom: 5px; }
.home-writing > .section-description, .home-travel .section-description { margin-top: 18px; }
.home-writing .post-list { margin-top: 35px; }
.home-travel { background: var(--travel-band); }
.trip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 55px 36px; }
.travel-showcase { display: grid; grid-template-columns: minmax(0, 16fr) minmax(0, 9fr); gap: 24px; margin-top: 40px; }
.travel-carousel { min-width: 0; position: relative; border-radius: 16px; overflow: hidden; background: var(--sand); aspect-ratio: 4 / 3; }
.carousel-portrait { aspect-ratio: 3 / 4; }
.carousel-slides, .carousel-slide, .carousel-photo { position: absolute; inset: 0; }
.carousel-photo { display: block; }
.carousel-slide.is-active { z-index: 1; animation: carousel-reveal 300ms ease-in-out; }
.carousel-slide.is-leaving { pointer-events: none; }
@keyframes carousel-reveal { from { opacity: 0; } to { opacity: 1; } }
.carousel-photo img { width: 100%; height: 100%; object-fit: cover; }
.carousel-slide figcaption { position: absolute; z-index: 2; left: 18px; bottom: 16px; max-width: calc(100% - 36px); padding: 14px 16px; border-radius: 10px; background: var(--paper); color: var(--ink); font-size: var(--text-small); line-height: 1.5; opacity: 0; transform: translateY(24px); transition: transform .2s ease-out, opacity .2s ease-out; pointer-events: none; }
.travel-carousel:hover .is-active figcaption, .travel-carousel:has(:focus-visible) .is-active figcaption { opacity: 1; transform: translateY(0); }
.carousel-controls button { position: absolute; z-index: 3; border: 0; cursor: pointer; opacity: 0; transition: opacity .2s; }
.carousel-controls button[data-carousel-prev], .carousel-controls button[data-carousel-next] { top: 0; bottom: 0; width: 33.333%; display: flex; align-items: center; padding: 16px; background: transparent; color: white; filter: drop-shadow(0 1px 3px #0009); }
.carousel-controls button[data-carousel-prev] { left: 0; }
.carousel-controls button[data-carousel-next] { right: 0; justify-content: flex-end; }
.carousel-controls svg { width: 28px; height: 56px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.travel-carousel:hover .carousel-controls button, .travel-carousel:has(:focus-visible) .carousel-controls button { opacity: .8; }
.carousel-controls button:hover, .carousel-controls button:focus-visible { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .carousel-controls button { opacity: .85; }
  .carousel-controls button[data-carousel-prev], .carousel-controls button[data-carousel-next] { padding: 12px; }
  .carousel-controls svg { width: 22px; height: 44px; }
}
@media (max-width: 768px) {
  .travel-showcase { grid-template-columns: minmax(0, 1fr); }
  .carousel-portrait { display: none; }
}
.trip-card { min-width: 0; }
.trip-cover { position: relative; border-radius: 22px; overflow: hidden; background: var(--sand); aspect-ratio: 4 / 3; }
.trip-cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.trip-card a:hover .trip-cover > img { transform: scale(1.035); }
.trip-open { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); display: grid; place-content: center; font-size: 1.2rem; transition: transform .2s ease; }
.trip-card a:hover .trip-open { transform: rotate(45deg); }
.trip-card-meta { display: flex; justify-content: space-between; margin-block: 22px 9px; font-size: var(--text-label); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.trip-card h2, .trip-card h3 { font-size: var(--title-large); letter-spacing: -.04em; }
.trip-card p { color: var(--muted); font-size: var(--text-small); line-height: 1.75; margin-top: 10px; max-width: 420px; }
.trip-art { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--art-mountain); color: var(--art-mountain-ink); }
.trip-art svg { width: 58%; max-height: 78%; }
.trip-art > span { font-size: var(--text-label); letter-spacing: .1em; text-transform: uppercase; margin-top: -10px; }
.art-city { background: var(--blue); color: var(--art-city-ink); }
.art-desert { background: var(--art-desert); color: var(--art-desert-ink); }
.art-coast { background: var(--art-coast); color: var(--art-coast-ink); }
.home-signoff { padding-block: 105px; text-align: center; }
.home-signoff h2 { font-size: clamp(2rem, 4vw, 3rem); }
.home-signoff > p { color: var(--muted); margin-top: 18px; font-size: var(--text-body); }
.home-signoff .pill-link { margin-top: 28px; }

/* Inner pages share navigation, type, and spacing, with content-specific layouts. */
.page-intro { padding-block: 77px 65px; max-width: 920px; }
.page-intro h1 { margin-top: 0; }
.page-intro .eyebrow + h1 { margin-top: 20px; }
.page-lede { color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.85; max-width: 650px; margin-top: 26px; }
.archive-intro { display: grid; grid-template-columns: minmax(min(650px, 100%), max-content); }
.archive-intro h1 { white-space: nowrap; }
.archive-intro .page-lede { max-width: none; width: 0; min-width: 100%; }
.about-intro { display: grid; grid-template-columns: .8fr 1.3fr; gap: 70px; align-items: center; }
.about-intro > img { border-radius: 150px 150px 20px 20px; aspect-ratio: 1; object-fit: cover; }
.about-intro h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 25px; }
.about-intro p { color: var(--muted); font-size: var(--text-body); margin-top: 18px; line-height: 1.75; }
.timeline-section { --timeline-axis: 240px; --timeline-gap: 45px; --timeline-toggle-gap: 32px; scroll-margin-top: 35px; }
.timeline-more { margin-top: var(--timeline-toggle-gap); }
.timeline-more summary { display: flex; align-items: center; gap: 10px; list-style: none; position: relative; width: fit-content; min-height: 44px; padding: 10px 20px; border: 1px solid var(--line); border-radius: 100px; color: var(--ink); font-size: var(--text-link); font-weight: 500; cursor: pointer; }
.timeline-more summary:hover { background: var(--sand); }
.timeline-more summary::marker { content: ''; }
.timeline-more summary::-webkit-details-marker { display: none; }
.timeline-toggle-icon { flex-shrink: 0; transition: transform .2s ease; }
.timeline-more[open] .timeline-toggle-icon { transform: rotate(180deg); }
.timeline-more .timeline-less-label, .timeline-more[open] .timeline-more-label { display: none; }
.timeline-more[open] .timeline-less-label { display: inline; }
.timeline-section:has(> .timeline-more[open]) > .timeline > li:last-child .timeline-body { border-left-color: var(--line); }
.timeline-more[open] summary::after { content: ''; position: absolute; left: calc(var(--timeline-axis) - 1px); top: calc(-1 * var(--timeline-toggle-gap) - 1px); bottom: calc(-1 * var(--timeline-gap) - 1px); border-left: 1px solid var(--line); pointer-events: none; }


.timeline { list-style: none; margin: var(--timeline-gap) 0 0; padding: 0; }
.timeline > li { display: grid; grid-template-columns: var(--timeline-axis) 1fr; }
.timeline-period { display: flex; flex-direction: column; padding-top: 2px; padding-right: 24px; font-size: var(--text-small); font-weight: 500; }
.timeline-category { margin-top: 5px; color: var(--muted); font-size: var(--text-caption); font-weight: 400; }
.timeline-body { position: relative; border-left: 1px solid var(--line); padding: 0 0 46px 45px; }
.timeline-body::before { content: ''; position: absolute; top: 5px; left: -5px; width: 9px; height: 9px; background: var(--green); border-radius: 50%; }
.timeline > li:last-child .timeline-body { border-left-color: transparent; padding-bottom: 0; }
.timeline-organization { font-size: var(--text-caption); font-weight: 500; }
.timeline-organization span { color: var(--muted); font-weight: 400; }
.timeline-body h3 { margin-top: 9px; font-size: var(--title-medium); }
.timeline-body > p:not(.timeline-organization) { margin-top: 14px; max-width: 650px; color: var(--muted); font-size: var(--text-body); line-height: 1.75; }
.timeline-body > a { margin-top: 15px; font-size: var(--text-link-small); }
.interests-section { padding: 55px; border-radius: 32px; background: var(--blue); }
.interests-section .section-heading h2 { font-size: 2.5rem; }
.interest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; margin-top: 45px; }
.interest-grid img { width: 48px; height: 48px; object-fit: contain; }
[data-theme="dark"] .interest-grid img { filter: invert(.92); }
.interest-grid h3 { font-size: var(--title-small); margin-top: 22px; }
.interest-grid p { font-size: var(--text-body); line-height: 1.75; margin-top: 14px; }
.archive-note { display: flex; justify-content: space-between; align-items: center; gap: 100px; margin-block: 65px 85px; padding: 35px 0; border-block: 1px solid var(--line); }
.archive-note h2 { font-size: var(--title-small); }
.archive-note p { color: var(--muted); font-size: .9375rem; line-height: 1.75; margin-top: 10px; }
.archive-note a { flex-shrink: 0; }

.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { border-top: 1px solid var(--line); }
.post-list li:last-child { border-bottom: 1px solid var(--line); }
.post-row { display: grid; grid-template-columns: 165px 1fr 30px; gap: 30px; align-items: start; padding: 35px 0; }
.post-meta { display: flex; flex-direction: column; gap: 9px; padding-top: 3px; color: var(--muted); font-size: var(--text-caption); }
.post-meta > span { font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; }
.post-main h2, .post-main h3 { font-size: var(--title-medium); line-height: 1.4; letter-spacing: -.03em; transition: color .2s ease; }
.post-row:hover h2, .post-row:hover h3 { color: var(--green); }
.post-main p { font-size: var(--text-small); line-height: 1.75; margin-top: 8px; color: var(--muted); }
.post-source { display: inline-block; font-size: var(--text-caption); margin-top: 15px; color: var(--muted); }
.post-arrow { font-size: 1.5rem; line-height: 1.2; text-align: right; }
.post-arrow .external-icon { transition: transform .2s ease; }
.post-row:hover .post-arrow .external-icon, .post-row:focus-visible .post-arrow .external-icon { transform: rotate(45deg); }
.writing-note { display: flex; align-items: center; gap: 25px; padding: 28px 32px; background: var(--blue); border-radius: 18px; margin-block: 50px 100px; }
.writing-note p { font-size: var(--text-body); line-height: 1.75; flex: 1; }
.writing-note .text-link { flex-shrink: 0; }
.note-symbol { font-size: 2rem; }
.travel-index-heading { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-block: 22px 30px; }
.travel-index-heading > p:last-child { font-size: var(--text-caption); color: var(--muted); }
.travel-index-heading + .trip-grid { margin-bottom: 100px; }
.detail-back { padding-top: 45px; }
.detail-back a { font-size: var(--text-link); }
.trip-intro { padding-block: 45px; }
.trip-intro h1 { font-size: clamp(3rem, 6.6vw, 5.6rem); margin-top: 18px; }
.trip-intro .page-lede { max-width: 750px; font-size: var(--text-body); }
.place-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.place-list li { border: 1px solid var(--line); padding: 6px 13px; border-radius: 30px; font-size: var(--text-caption); }
.place-list.is-filterable li { border: 0; padding: 0; }
.place-filter { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 30px; background: transparent; color: var(--ink); font: inherit; }
.place-filter:hover { border-color: var(--green); background: var(--nav); }
.place-filter[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: var(--paper); }
.related-writing { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 26px 32px; border-radius: 18px; background: var(--blue); margin-bottom: 55px; }
.related-writing h2 { font-size: var(--title-small); margin-top: 8px; }
.related-writing .text-link { flex-shrink: 0; }
.album-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 25px; }
.album-heading h2 { font-size: var(--title-large); }
.album-heading span, .album-hint { font-size: var(--text-caption); color: var(--muted); }
.album-hint { margin-top: -12px; margin-bottom: 24px; }
.photo-grid { columns: 3; column-gap: 22px; }
.photo-item { break-inside: avoid; margin-bottom: 25px; }
.photo-link { display: block; background: var(--sand); border-radius: 12px; overflow: hidden; }
.photo-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.photo-portrait img { aspect-ratio: 3 / 4; }
.photo-link:hover img { transform: scale(1.025); }
.photo-item figcaption { padding: 9px 2px 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.6; }
.album-pending { text-align: center; padding: 45px 25px 55px; background: var(--pending); border-radius: 26px; }
.album-pending .trip-art { width: 250px; height: 180px; border-radius: 20px; margin: 0 auto 30px; }
.album-pending .trip-art > span { display: none; }
.album-pending h2 { font-size: var(--title-large); }
.album-pending > p { margin-top: 18px; font-size: var(--text-body); color: var(--muted); }
.album-pending > a { margin-top: 22px; }
.trip-pagination { display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); padding-block: 30px; margin-block: 60px; }
.trip-pagination a { font-family: var(--heading); font-size: 1rem; max-width: 48%; }
.trip-pagination a:last-child { text-align: right; }
.trip-pagination a:hover { text-decoration: underline; text-underline-offset: 5px; }
.trip-pagination span { display: block; font-family: var(--body); font-size: var(--text-caption); color: var(--muted); margin-bottom: 8px; }

.lightbox { width: min(1100px, 96vw); max-width: none; max-height: 95dvh; padding: 18px 24px 24px; background: var(--paper); border: none; border-radius: 18px; color: var(--ink); }
.lightbox::backdrop { background: #181816e8; }
.lightbox-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.lightbox-toolbar p { font-size: var(--text-caption); color: var(--muted); }
.lightbox button { background: transparent; border: 1px solid var(--line); border-radius: 100px; min-width: 44px; min-height: 44px; padding: 8px 15px; font-size: var(--text-link-small); }
.lightbox-toolbar span { margin-left: 10px; font-size: 1.2rem; }
.lightbox-stage { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 15px; align-items: center; }
.lightbox-stage figure { min-width: 0; }
.lightbox-stage img { width: 100%; height: min(68dvh, 750px); object-fit: contain; }
.lightbox-stage figcaption { margin-top: 16px; text-align: center; font-size: var(--text-small); }
.lightbox-stage button { padding: 0; font-size: 1.2rem; }
.image-unavailable { position: relative; background: var(--sand); }
.image-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 25px; text-align: center; color: var(--muted); font-size: var(--text-caption); }
.photo-link > .image-fallback { aspect-ratio: 4 / 3; }
.photo-portrait .photo-link > .image-fallback { aspect-ratio: 3 / 4; }
.image-fallback small { font-size: var(--text-label); }
.lightbox-stage .image-fallback { min-height: 35dvh; }
.article { max-width: 760px; margin: 50px auto 100px; }
.article h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); margin-top: 20px; }
.prose { margin-top: 50px; font-size: 1.05rem; line-height: 1.95; }
.prose > * + * { margin-top: 1.5em; }
.prose h2 { font-size: 1.8rem; margin-top: 2em; }
.prose h3 { font-size: 1.3rem; margin-top: 2em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left: 3px solid var(--green); padding-left: 25px; margin-inline: 0; color: var(--muted); }
.prose img { border-radius: 12px; }
.project-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 55px; margin-bottom: 40px; }
.project-list article { display: flex; align-items: start; gap: 24px; border-top: 1px solid var(--line); padding-block: 32px; }
.project-list img { width: 68px; height: 68px; border-radius: 16px; background: var(--sand); flex-shrink: 0; object-fit: cover; }
[data-theme="dark"] .project-list img { background: #e1dcd0; }
.project-list h2 { font-size: var(--title-small); }
.project-list p { font-size: var(--text-small); line-height: 1.75; color: var(--muted); margin-top: 12px; }
.project-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; }
.project-links a { font-size: var(--text-link-small); }
.project-list + a { margin-bottom: 80px; }

.site-footer { border-top: 1px solid var(--line); padding-block: 42px 28px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-top p { color: var(--muted); font-size: var(--text-caption); }
.footer-weather { line-height: 1.6; }
.footer-weather a { text-underline-offset: 3px; text-decoration-color: var(--line); }
.footer-weather a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 45px; color: var(--muted); font-size: .75rem; }
.footer-bottom small { font-size: inherit; }
.footer-bottom ul { display: flex; gap: 25px; list-style: none; padding: 0; margin: 0; }
.footer-bottom a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
main.wrap { min-height: 65vh; }

@media (min-width: 1600px) {
  .home-hero { padding-block: 110px 160px; }
}
@media (max-width: 1050px) {
  .wrap { width: calc(100% - 72px); }
  .home-hero { gap: 55px; padding-block: 65px 100px; }
  .split-section { gap: 60px; }
  .career-preview { padding-left: 6px; }
  .about-intro { gap: 40px; }
  .timeline-section { --timeline-axis: 210px; }
  .interest-grid { gap: 28px; }
  .interests-section { padding: 40px; }
  .post-row { grid-template-columns: 140px 1fr 25px; gap: 20px; }
  .writing-note { flex-wrap: wrap; gap: 20px; }
  .writing-note p { flex-basis: calc(100% - 60px); }
  .writing-note .text-link { margin-left: 52px; }
}
@media (max-width: 700px) {
  :root { --text-body: .9375rem; --title-large: 1.4rem; --title-medium: 1.25rem; }
  .wrap { width: calc(100% - 40px); }
  .site-header { grid-template-columns: 44px minmax(0, 1fr); min-height: 88px; padding-block: 22px; gap: 16px; }
  .header-contact { display: none; }
  .navigation { top: 22px; right: 20px; left: auto; transform: none; padding: 4px; gap: 0; }
  .navigation a { padding: 9px 14px; }
  .home-hero { grid-template-columns: 1fr; gap: 40px; padding-block: 55px 65px; }
  .hero-description { margin-top: 24px; }
  .hero-typewriter { font-size: clamp(1rem, 4.8vw, 1.45rem); }
  .hero-note { max-width: 100%; }
  .hero-photo { width: min(100%, 460px); justify-self: center; padding-top: 0; }
  .hero-photo picture { aspect-ratio: 1.15; border-radius: 150px 150px 16px 16px; }
  .hero-photo img { object-position: center; }
  .hero-photo figcaption { padding-top: 12px; }
  .section-band { padding-block: 60px; }
  .split-section { grid-template-columns: 1fr; gap: 45px; }
  .split-section h2 br { display: none; }
  .career-preview { padding-left: 6px; }
  .career-preview li { padding-left: 26px; }
  .section-space { padding-block: 65px; }
  .section-heading { align-items: start; flex-direction: column; gap: 18px; }
  .section-heading .eyebrow + h2 { margin-top: 12px; }
  .section-heading > .text-link { padding: 0; }
  .post-row { grid-template-columns: 1fr 22px; gap: 10px 15px; padding-block: 25px; }
  .post-meta { grid-column: 1 / -1; flex-direction: row; gap: 18px; align-items: center; padding-top: 0; }
  .post-arrow { grid-column: 2; grid-row: 2; font-size: 1.3rem; }
  .trip-grid { gap: 40px; grid-template-columns: 1fr; }
  .trip-cover { border-radius: 18px; }
  .trip-card-meta { margin-top: 17px; }
  .home-signoff { padding-block: 65px; }
  .home-signoff h2 { font-size: 2.1rem; }
  .page-intro { padding-block: 50px 40px; }
  .page-intro .eyebrow + h1 { margin-top: 15px; }
  .page-lede { margin-top: 22px; }
  .about-intro { grid-template-columns: 1fr; gap: 35px; }
  .about-intro > img { max-width: 350px; width: 100%; justify-self: center; }
  .timeline-section { --timeline-axis: 0px; --timeline-gap: 35px; }
  .timeline-more summary { margin-left: 25px; }
  .timeline-more[open] summary::after { left: -26px; }
  .timeline-section:has(> .timeline-more[open]) > .timeline > li:last-child { border-left-color: var(--line); }
  .timeline > li { grid-template-columns: 1fr; position: relative; padding-left: 25px; padding-bottom: 35px; border-left: 1px solid var(--line); }
  .timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
  .timeline-period { flex-direction: row; gap: 14px; align-items: center; padding-top: 0; padding-right: 0; margin-bottom: 14px; }
  .timeline-category { margin-top: 0; }
  .timeline-body { border: 0; position: static; padding: 0; }
  .timeline-body::before { top: 7px; }
  .timeline-organization span { white-space: nowrap; }
  .interests-section { border-radius: 22px; padding: 30px; }
  .interests-section .section-heading h2 { font-size: 2rem; }
  .interest-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 35px; }
  .interest-grid img { width: 42px; height: 42px; }
  .interest-grid h3 { margin-top: 14px; }
  .archive-note { flex-direction: column; align-items: start; gap: 20px; margin-block: 45px 60px; }
  .archive-note p { font-size: var(--text-small); }
  .writing-note { padding: 25px; margin-block: 35px 65px; gap: 15px; }
  .writing-note .text-link { margin-left: 47px; }
  .travel-index-heading { padding-block: 20px 25px; gap: 15px; }
  .travel-index-heading + .trip-grid { margin-bottom: 65px; }
  .detail-back { padding-top: 30px; }
  .trip-intro { padding-block: 30px; }
  .trip-intro h1 { font-size: clamp(2.8rem, 10vw, 4.5rem); }
  .related-writing { padding: 25px; flex-direction: column; align-items: start; gap: 18px; margin-bottom: 35px; }
  .album-heading { align-items: start; flex-direction: column; gap: 10px; }
  .photo-grid { columns: 2; column-gap: 14px; }
  .photo-item { margin-bottom: 20px; }
  .photo-link { border-radius: 8px; }
  .album-pending { padding-inline: 20px; }
  .album-pending .trip-art { max-width: 100%; }
  .trip-pagination a { font-size: .85rem; }
  .trip-pagination { margin-block: 40px; }
  .lightbox { width: calc(100vw - 20px); padding: 15px; }
  .lightbox-stage { grid-template-columns: 44px 1fr 44px; gap: 10px; }
  .lightbox-stage figure { grid-column: 1 / -1; grid-row: 1; }
  .lightbox-stage img { height: 58dvh; }
  .lightbox-stage [data-prev] { grid-row: 2; grid-column: 1; }
  .lightbox-stage [data-next] { grid-row: 2; grid-column: 3; }
  .project-list { grid-template-columns: 1fr; }
  .project-list article { gap: 20px; }
  .project-list img { width: 55px; height: 55px; border-radius: 12px; }
  .project-list + a { margin-bottom: 55px; }
  .article { margin-top: 35px; }
  .prose { font-size: 1rem; }
  .footer-bottom { flex-wrap: wrap; gap: 18px; margin-top: 30px; }
  .footer-bottom ul { gap: 18px; }
  .back-to-top { width: 100%; }
}
@media (max-width: 360px) {
  .navigation a { padding-inline: 8px; }
  .site-header { gap: 12px; }
  h1 { font-size: 14.5vw; }
  .home-hero h1 { font-size: 15.5vw; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}