@font-face {
  font-family: "Readex Pro";
  src: url("../fonts/ReadexPro-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --space: #04060d;
  --space-soft: #0a0e18;
  --star: #f5f2ed;
  --muted: rgba(245, 242, 237, 0.68);
  --quiet: rgba(245, 242, 237, 0.48);
  --accent: #c26148;
  --accent-light: #e08663;
  --line: rgba(245, 242, 237, 0.15);
  --line-soft: rgba(245, 242, 237, 0.09);
  font-family: "Readex Pro", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--space);
}

body {
  min-width: 280px;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(75, 53, 104, 0.14), transparent 31rem),
    radial-gradient(circle at 91% 34%, rgba(29, 104, 115, 0.08), transparent 28rem),
    linear-gradient(180deg, rgba(4, 6, 13, 0.1), rgba(4, 6, 13, 0.9) 93%),
    var(--space);
  color: var(--star);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 4px;
}

.space-atmosphere {
  position: fixed;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  inset: 0;
}

.sun-glow {
  position: absolute;
  width: min(72vw, 920px);
  height: min(62vw, 720px);
  border: 1px solid rgba(194, 97, 72, 0.08);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(194, 97, 72, 0.14), rgba(194, 97, 72, 0.035) 42%, transparent 71%);
  bottom: -53%;
  left: 50%;
  opacity: 0.82;
  transform: translateX(-50%);
}

.stars {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: rgba(245, 242, 237, 0.62);
  inset: 0 auto auto 0;
}

.stars::before {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  box-shadow: var(--star-map);
  content: "";
}

.stars-far {
  --star-map:
    3vw 7vh #f5f2ed, 8vw 42vh #dce8f2, 12vw 81vh #f0dac8, 16vw 19vh #f5f2ed,
    20vw 63vh #f5f2ed, 24vw 34vh #dce8f2, 28vw 91vh #f5f2ed, 32vw 12vh #f0dac8,
    36vw 72vh #f5f2ed, 40vw 26vh #dce8f2, 44vw 86vh #f5f2ed, 48vw 48vh #f0dac8,
    52vw 8vh #f5f2ed, 56vw 68vh #dce8f2, 60vw 39vh #f5f2ed, 64vw 95vh #f0dac8,
    68vw 22vh #f5f2ed, 72vw 57vh #dce8f2, 76vw 14vh #f5f2ed, 80vw 77vh #f0dac8,
    84vw 37vh #f5f2ed, 88vw 89vh #dce8f2, 92vw 17vh #f5f2ed, 96vw 61vh #f0dac8,
    6vw 93vh #dce8f2, 10vw 29vh #f5f2ed, 14vw 54vh #f5f2ed, 18vw 76vh #f0dac8,
    22vw 6vh #f5f2ed, 26vw 47vh #dce8f2, 30vw 67vh #f5f2ed, 34vw 31vh #f0dac8,
    38vw 97vh #f5f2ed, 42vw 55vh #dce8f2, 46vw 16vh #f5f2ed, 50vw 79vh #f0dac8,
    54vw 29vh #f5f2ed, 58vw 89vh #dce8f2, 62vw 4vh #f5f2ed, 66vw 52vh #f0dac8,
    70vw 83vh #f5f2ed, 74vw 33vh #dce8f2, 78vw 66vh #f5f2ed, 82vw 5vh #f0dac8,
    86vw 51vh #f5f2ed, 90vw 73vh #dce8f2, 94vw 42vh #f5f2ed, 98vw 94vh #f0dac8;
  width: 1.2px;
  height: 1.2px;
  opacity: 0.56;
  box-shadow: var(--star-map);
}

.stars-far::before {
  left: 100vw;
}

.stars-near {
  --star-map:
    5vw 24vh rgba(245, 242, 237, 0.8), 11vw 68vh rgba(224, 237, 245, 0.72),
    17vw 8vh rgba(245, 230, 218, 0.72), 23vw 83vh rgba(245, 242, 237, 0.78),
    29vw 43vh rgba(224, 237, 245, 0.7), 35vw 16vh rgba(245, 242, 237, 0.8),
    41vw 76vh rgba(245, 230, 218, 0.68), 47vw 29vh rgba(245, 242, 237, 0.74),
    53vw 91vh rgba(224, 237, 245, 0.72), 59vw 13vh rgba(245, 242, 237, 0.82),
    65vw 61vh rgba(245, 230, 218, 0.7), 71vw 35vh rgba(245, 242, 237, 0.76),
    77vw 87vh rgba(224, 237, 245, 0.72), 83vw 20vh rgba(245, 242, 237, 0.8),
    89vw 55vh rgba(245, 230, 218, 0.7), 95vw 9vh rgba(245, 242, 237, 0.78),
    2vw 58vh rgba(224, 237, 245, 0.7), 14vw 37vh rgba(245, 242, 237, 0.76),
    26vw 4vh rgba(245, 230, 218, 0.68), 38vw 57vh rgba(245, 242, 237, 0.8),
    50vw 19vh rgba(245, 242, 237, 0.72), 62vw 80vh rgba(245, 242, 237, 0.76),
    74vw 6vh rgba(245, 230, 218, 0.7), 86vw 70vh rgba(245, 242, 237, 0.8),
    98vw 34vh rgba(245, 242, 237, 0.72);
  width: 1.7px;
  height: 1.7px;
  opacity: 0.66;
  box-shadow: var(--star-map);
}

.stars-near::before {
  left: -100vw;
}

.stars-bright {
  --star-map:
    7vw 17vh rgba(255, 233, 209, 0.92), 14vw 74vh rgba(255, 241, 218, 0.86),
    21vw 38vh rgba(255, 226, 200, 0.9), 31vw 9vh rgba(255, 240, 218, 0.88),
    39vw 88vh rgba(255, 229, 204, 0.92), 46vw 23vh rgba(255, 242, 224, 0.88),
    57vw 63vh rgba(255, 226, 197, 0.9), 64vw 12vh rgba(255, 240, 218, 0.92),
    72vw 83vh rgba(255, 230, 207, 0.86), 79vw 43vh rgba(255, 243, 224, 0.9),
    87vw 7vh rgba(255, 227, 198, 0.92), 93vw 69vh rgba(255, 239, 215, 0.86),
    97vw 28vh rgba(255, 229, 204, 0.9), 52vw 94vh rgba(255, 241, 221, 0.88);
  width: 2px;
  height: 2px;
  background: rgba(255, 236, 214, 0.9);
  box-shadow: var(--star-map);
  opacity: 0.66;
}

.stars-bright::before {
  left: 100vw;
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}

.site-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}

.wordmark {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: rgba(245, 242, 237, 0.9);
  font-size: 0.7rem;
  font-weight: 620;
  letter-spacing: 0.19em;
  text-decoration: none;
}

.wordmark-mark {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid var(--accent-light);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--space), 0 0 0 1px rgba(224, 134, 99, 0.22);
}

.language-selector {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 5px;
  color: var(--quiet);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.language-label {
  margin-right: 7px;
  color: rgba(245, 242, 237, 0.38);
  letter-spacing: 0.08em;
}

.language-selector button {
  min-width: 38px;
  min-height: 40px;
  padding: 6px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--quiet);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.language-selector button:hover,
.language-selector button:focus-visible {
  border-color: rgba(224, 134, 99, 0.42);
  background: rgba(194, 97, 72, 0.08);
  color: var(--star);
}

.language-selector button[aria-pressed="true"] {
  border-color: rgba(224, 134, 99, 0.66);
  color: var(--accent-light);
}

.language-divider {
  color: rgba(245, 242, 237, 0.24);
}

.hero {
  display: grid;
  min-height: min(690px, calc(100svh - 76px));
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.68fr);
  gap: clamp(40px, 8vw, 112px);
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 112px);
}

.hero-copy {
  min-width: 0;
  max-width: 670px;
}

.kicker {
  display: flex;
  margin: 0 0 22px;
  align-items: center;
  gap: 11px;
  color: var(--accent-light);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  line-height: 1.4;
}

.kicker::before {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.82;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  color: var(--star);
  font-size: clamp(3.55rem, 9.2vw, 6.9rem);
  font-weight: 260;
  letter-spacing: -0.085em;
  line-height: 0.94;
}

.role {
  max-width: 31ch;
  margin: 25px 0 0;
  color: var(--accent-light);
  font-size: clamp(1.05rem, 2.3vw, 1.45rem);
  font-weight: 470;
  letter-spacing: -0.025em;
  line-height: 1.32;
}

.summary {
  max-width: 36ch;
  margin: 20px 0 0;
  color: rgba(245, 242, 237, 0.85);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  font-weight: 360;
  letter-spacing: -0.015em;
  line-height: 1.56;
}

.facts {
  display: grid;
  max-width: 600px;
  margin: 38px 0 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  list-style: none;
}

.facts li {
  display: grid;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  gap: 4px;
}

.facts strong {
  color: var(--star);
  font-size: 0.89rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.facts abbr {
  color: inherit;
  text-decoration: none;
}

.facts li span {
  color: rgba(245, 242, 237, 0.63);
  font-size: 0.75rem;
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  margin-top: 42px;
  align-items: center;
  gap: 22px;
}

.journey-cta {
  display: inline-flex;
  min-height: 54px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 14px 22px 14px 24px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--accent);
  color: #160e0b;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.journey-cta:hover,
.journey-cta:focus-visible {
  border-color: var(--accent-light);
  background: var(--accent-light);
  color: var(--space);
  transform: translateY(-2px);
}

.journey-cta:active {
  transform: translateY(1px);
}

.cta-chevron {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 160ms ease;
}

.journey-cta:hover .cta-chevron,
.journey-cta:focus-visible .cta-chevron {
  transform: translateX(3px);
}

.experience-note {
  max-width: 25ch;
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(224, 134, 99, 0.58);
  color: var(--quiet);
  font-size: 0.75rem;
  line-height: 1.5;
}

.contact-block {
  margin-top: 32px;
}

.contact-lead {
  margin: 0 0 7px;
  color: rgba(245, 242, 237, 0.4);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.contact-actions a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(224, 134, 99, 0.48);
  color: rgba(245, 242, 237, 0.82);
  font-size: 0.73rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.contact-actions a span:last-child {
  color: var(--accent-light);
  font-size: 0.9rem;
  line-height: 1;
}

.contact-actions a:hover,
.contact-actions a:focus-visible {
  border-color: var(--accent-light);
  color: var(--star);
  transform: translateY(-1px);
}

.hero-visual {
  display: grid;
  min-width: 0;
  justify-items: center;
  align-content: center;
}

.portrait-wrap {
  position: relative;
  display: block;
  width: clamp(200px, 25vw, 292px);
  aspect-ratio: 1;
  margin: 0;
  padding: 12px;
  appearance: none;
  border: 1px solid rgba(224, 134, 99, 0.64);
  border-radius: 50%;
  background: rgba(10, 14, 24, 0.62);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.46), 0 0 70px rgba(194, 97, 72, 0.11);
  color: inherit;
  cursor: zoom-in;
}

.portrait-wrap::before {
  position: absolute;
  border: 1px solid rgba(224, 134, 99, 0.28);
  border-radius: 50%;
  content: "";
  inset: 6px;
  pointer-events: none;
}

.portrait-wrap:focus-visible {
  outline-offset: 7px;
}

.portrait-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 26%;
  filter: saturate(0.82) contrast(1.03);
}

.portrait-orbit {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(224, 134, 99, 0.25);
  border-radius: 50%;
  pointer-events: none;
}

.portrait-orbit-one {
  inset: -18px 1px;
  transform: rotate(-17deg);
}

.portrait-orbit-two {
  inset: 1px -24px;
  border-color: rgba(184, 209, 223, 0.18);
  transform: rotate(66deg);
}

.portrait-caption {
  display: flex;
  margin: 28px 0 0;
  align-items: center;
  gap: 10px;
  color: var(--quiet);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

.caption-rule {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--accent-light);
  opacity: 0.8;
}

.selected-work {
  padding: clamp(68px, 9vw, 110px) 0 86px;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 36px;
  align-items: end;
  margin-bottom: 48px;
}

.section-heading .kicker {
  grid-column: 1 / -1;
  margin-bottom: -17px;
}

.section-heading h2 {
  max-width: 17ch;
  margin: 0;
  color: var(--star);
  font-size: clamp(1.7rem, 3.2vw, 2.65rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.section-heading > p:last-child {
  max-width: 30ch;
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.6;
}

.work-grid {
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-item {
  display: flex;
  min-width: 0;
  min-height: 328px;
  flex-direction: column;
  padding: 24px 26px 30px 0;
}

.work-item + .work-item {
  margin-left: 26px;
  padding-left: 26px;
  border-left: 1px solid var(--line);
}

.work-index,
.work-meta {
  margin: 0;
  color: var(--accent-light);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.4;
}

.work-index {
  margin-bottom: 28px;
  color: rgba(245, 242, 237, 0.42);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.work-index span {
  margin: 0 2px;
  color: var(--accent-light);
}

.work-meta {
  min-height: 2.8em;
}

.work-item h3 {
  margin: 12px 0 13px;
  color: var(--star);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 430;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.work-item > p:not(.work-index):not(.work-meta) {
  margin: 0;
  color: rgba(245, 242, 237, 0.75);
  font-size: 0.875rem;
  line-height: 1.65;
}

.work-link {
  display: inline-flex;
  min-height: 42px;
  margin-top: auto;
  padding-top: 23px;
  align-items: center;
  gap: 9px;
  color: var(--star);
  font-size: 0.69rem;
  font-weight: 550;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.work-link span:first-child {
  border-bottom: 1px solid rgba(224, 134, 99, 0.58);
  padding-bottom: 3px;
}

.work-link span:last-child {
  color: var(--accent-light);
  font-size: 0.9rem;
  transition: transform 160ms ease;
}

.work-link:hover,
.work-link:focus-visible {
  color: var(--accent-light);
}

.work-link:hover span:last-child,
.work-link:focus-visible span:last-child {
  transform: translate(2px, -2px);
}

.noscript-note {
  margin: 0 0 64px;
  padding: 24px;
  border: 1px solid var(--line);
  background: rgba(10, 14, 24, 0.72);
}

.noscript-note h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 450;
}

.noscript-note p {
  max-width: 55ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.noscript-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: 18px;
  gap: 16px;
}

.noscript-actions a {
  color: var(--accent-light);
  font-size: 0.75rem;
}

.site-footer {
  display: flex;
  min-height: 80px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  color: rgba(245, 242, 237, 0.38);
  font-size: 0.63rem;
  letter-spacing: 0.05em;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: rgba(245, 242, 237, 0.62);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--accent-light);
}

.portrait-lightbox[hidden] {
  display: none;
}

.portrait-lightbox {
  position: fixed;
  z-index: 1000;
  display: grid;
  padding: 64px 24px 28px;
  background: rgba(4, 6, 13, 0.94);
  -webkit-backdrop-filter: blur(18px) brightness(0.72);
  backdrop-filter: blur(18px) brightness(0.72);
  inset: 0;
  isolation: isolate;
  opacity: 1;
  place-items: center;
}

.portrait-lightbox figure {
  display: grid;
  max-width: 92vw;
  margin: 0;
  gap: 14px;
  place-items: center;
  transform: scale(0.985);
  transition: transform 220ms ease;
}

.portrait-lightbox.is-open figure {
  transform: scale(1);
}

.portrait-lightbox img {
  display: block;
  width: auto;
  max-width: 92vw;
  height: auto;
  max-height: 84vh;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: var(--space);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.62), 0 0 60px rgba(194, 97, 72, 0.1);
  cursor: zoom-out;
  object-fit: contain;
}

.portrait-lightbox figcaption {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.lightbox-close {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(10, 14, 24, 0.7);
  color: var(--star);
  cursor: pointer;
  place-items: center;
  right: max(20px, env(safe-area-inset-right));
  top: max(20px, env(safe-area-inset-top));
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  border-color: rgba(224, 134, 99, 0.68);
  background: rgba(194, 97, 72, 0.14);
  transform: rotate(4deg);
}

.lightbox-close svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.6;
}

html.lightbox-open,
html.lightbox-open body {
  overflow: hidden;
}

@media (max-width: 760px) {
  .site-header,
  main,
  .site-footer {
    width: min(100% - 28px, 600px);
  }

  .hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 54px;
    padding-top: 48px;
  }

  .hero-copy {
    max-width: none;
  }

  h1 {
    font-size: clamp(3.35rem, 16vw, 5.2rem);
  }

  .hero-visual {
    grid-row: 1;
    justify-items: start;
  }

  .portrait-wrap {
    width: 96px;
    padding: 6px;
  }

  .portrait-orbit-one {
    inset: -10px 0;
  }

  .portrait-orbit-two {
    inset: 0 -13px;
  }

  .portrait-caption {
    display: none;
  }

  .hero-copy {
    grid-row: 2;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  .section-heading .kicker {
    margin-bottom: 0;
  }

  .section-heading h2,
  .section-heading > p:last-child {
    max-width: 38ch;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }

  .work-item {
    min-height: 0;
    padding: 25px 0 30px;
  }

  .work-item + .work-item {
    margin-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .work-index {
    margin-bottom: 20px;
  }

  .work-meta {
    min-height: 0;
  }

  .work-link {
    margin-top: 17px;
  }
}

@media (max-width: 500px) {
  .site-header {
    min-height: 68px;
  }

  .language-label {
    display: none;
  }

  .hero {
    gap: 42px;
    padding-top: 39px;
  }

  .kicker {
    margin-bottom: 18px;
    font-size: 0.57rem;
    letter-spacing: 0.14em;
  }

  .kicker::before {
    width: 18px;
  }

  h1 {
    font-size: clamp(3.1rem, 16vw, 4.5rem);
  }

  .role {
    margin-top: 18px;
    font-size: 1.03rem;
  }

  .summary {
    margin-top: 16px;
    font-size: 0.98rem;
    line-height: 1.52;
  }

  .facts {
    margin-top: 27px;
    gap: 14px 17px;
  }

  .facts li {
    padding-top: 8px;
  }

  .facts strong {
    font-size: 0.78rem;
  }

  .facts li span {
    font-size: 0.75rem;
    line-height: 1.38;
  }

  .hero-actions {
    margin-top: 30px;
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .journey-cta {
    width: 100%;
  }

  .experience-note {
    max-width: 32ch;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .contact-block {
    margin-top: 25px;
  }

  .portrait-caption {
    margin-top: 23px;
  }

  .selected-work {
    padding-top: 63px;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .section-heading h2 {
    font-size: 1.8rem;
  }

  .site-footer {
    min-height: 72px;
  }
}

@media (max-width: 340px) {
  .site-header,
  main,
  .site-footer {
    width: calc(100% - 24px);
  }

  .wordmark {
    font-size: 0.62rem;
  }

  .facts {
    gap: 12px 10px;
  }

  .facts li span {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}