@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/instrument-sans-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #1d3044;
  --muted: #56616b;
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: #fff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; touch-action: manipulation; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 7px; }
::selection { background: #1d3044; color: #fff; }

.page { display: grid; grid-template-columns: 44.5% 55.5%; min-height: 100vh; min-height: 100svh; }
.copy-panel { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100svh; padding: clamp(36px, 4.9vw, 75px) 28px clamp(36px, 4.7vw, 72px) clamp(32px, 4.88vw, 75px); }
.brand { display: inline-block; font-size: clamp(23px, 2.08vw, 32px); font-weight: 550; line-height: 1.25; letter-spacing: -.035em; text-decoration: none; }
.message { margin-block: auto; padding-block: 54px 110px; }
h1 { margin: 0; font-size: clamp(36px, 4.95vw, 84px); line-height: 1.06; letter-spacing: -.05em; font-weight: 400; }
h1 span { display: block; white-space: nowrap; }
.description { max-width: 39ch; margin: 32px 0 17px; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.65; color: var(--muted); letter-spacing: -.015em; }
.audience { margin: 0 0 19px; color: var(--muted); font-size: clamp(15px, 1.17vw, 18px); line-height: 1.5; letter-spacing: -.015em; }
.email { display: inline-block; min-height: 44px; font-size: clamp(17px, 1.37vw, 21px); line-height: 1.5; letter-spacing: -.025em; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.email:hover { text-decoration-thickness: 2px; }
footer { color: var(--muted); font-size: clamp(12px, 1.04vw, 16px); line-height: 1.5; letter-spacing: -.02em; }
.photo-panel { position: relative; min-width: 0; overflow: hidden; margin: 0; }
.photo-panel img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.photo-credit { position: absolute; inset: auto 16px 16px; width: fit-content; max-width: calc(100% - 32px); margin: 0; padding: 6px 9px; color: #fff; background: #0009; font-size: 10px; line-height: 1.6; }
.photo-credit a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.photo-credit a:focus-visible { outline-color: #fff; outline-offset: 3px; }

@media (min-width: 901px) and (max-height: 760px) {
  .copy-panel { padding-top: 40px; padding-bottom: 35px; }
  .message { padding-block: 40px 65px; }
  .description { margin-top: 27px; }
}
@media (max-width: 900px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .copy-panel { min-height: 510px; padding: 30px 28px 27px; }
  .brand { font-size: 24px; }
  .message { padding-block: 48px 35px; }
  h1 { font-size: clamp(36px, 10.5vw, 70px); line-height: 1.1; letter-spacing: -.05em; }
  .description { margin: 25px 0 15px; font-size: 16px; }
  .audience { font-size: 15px; margin-bottom: 17px; }
  .email { font-size: 17px; min-height: 44px; }
  footer { font-size: 12px; }
  .photo-panel { height: min(118vw, 680px); }
  .photo-panel img { object-position: 50% 55%; }
}
@media (max-width: 360px) {
  .copy-panel { min-height: 460px; padding: 26px 22px 24px; }
  .brand { font-size: 22px; }
  .message { padding-block: 42px 30px; }
  h1 { font-size: 34px; }
  .description, .email { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }