:root { color-scheme: light; --background: #fff; --foreground: #41413f; --border: #b6b6b4; --font-serif: 'Sabon LT Std', 'Baskerville', 'Times New Roman', serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--background); }
body { color: var(--foreground); font-family: var(--font-serif); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.landing { --view-height: 100svh; min-height: 100svh; height: var(--view-height); width: 100%; display: flex; flex-direction: column; padding-bottom: calc(var(--view-height) * .0185); }
.stage { position: relative; flex: 1; min-height: 0; isolation: isolate; }
.brand { position: absolute; z-index: 1; top: calc(var(--view-height) * .05555); left: 50%; transform: translateX(-50%); margin: 0; width: calc(var(--view-height) * .13148); }
.brand img { display: block; width: 100%; height: auto; }
.portrait { position: absolute; z-index: -1; top: calc(var(--view-height) * .09583); left: 50%; transform: translateX(-50%); height: calc(var(--view-height) * .67785); width: auto; object-fit: contain; pointer-events: none; }
.announcement { position: absolute; top: calc(var(--view-height) * .66475); left: 0; width: 100%; text-align: center; padding: 0 16px; }
h2 { margin: 0; font-size: max(16px, calc(var(--view-height) * .02222)); line-height: 1.21; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.while { margin: calc(var(--view-height) * .027) 0 calc(var(--view-height) * .016); font-size: max(16px, calc(var(--view-height) * .02222)); line-height: 1.2; }
.separator { display: inline-block; margin-inline: .65em; }
.documents { display: flex; align-items: center; justify-content: center; gap: calc(var(--view-height) * .0287); }
.document-link { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 36px; padding: .45em .9em; border: .75px solid var(--border); border-radius: 999px; background: #ffffff80; font-size: max(14px, calc(var(--view-height) * .01852)); font-weight: 400; line-height: 1.15; white-space: nowrap; transition: background .2s, border-color .2s; }
.document-link svg { width: 1em; height: 1em; stroke-width: 1; }
.document-link:disabled { cursor: default; }
a.document-link:hover { background: #f5f5f4; border-color: #41413f; }
a:focus-visible { outline: 2px solid #41413f; outline-offset: 5px; }
.contact { flex: 0 0 calc(var(--view-height) * .0787); border-block: .75px solid var(--border); display: flex; justify-content: center; align-items: center; gap: calc(var(--view-height) * .05555); padding: 10px 20px; font-size: max(14px, calc(var(--view-height) * .01852)); font-style: italic; }
.contact a { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.contact a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.contact svg { width: .9em; height: .9em; padding: 2px; border-radius: 50%; fill: #41413f; color: white; background: #41413f; stroke-width: 1.5; }
@media (max-width: 600px) {
  .landing { --view-height: 100svh; height: auto; padding-bottom: max(env(safe-area-inset-bottom), calc(var(--view-height) * .0244)); }
  .stage { min-height: auto; }
  .brand { top: calc(var(--view-height) * .044); width: calc(var(--view-height) * .1268); }
  .portrait { top: calc(var(--view-height) * .106); height: calc(var(--view-height) * .52); max-width: 90%; }
  .announcement { position: relative; top: auto; margin-top: calc(var(--view-height) * .5927); padding: 0 14px 12px; }
  h2 { font-size: max(18px, calc(var(--view-height) * .0244)); }
  .while { margin: calc(var(--view-height) * .024) 0 calc(var(--view-height) * .0122); font-size: clamp(16px, 4.95vw, 21px); }
  .separator { margin-inline: .45em; }
  .documents { flex-direction: column; gap: calc(var(--view-height) * .01); }
  .document-link { font-size: clamp(13px, 4.2vw, 18px); min-height: 40px; padding: .45em 1em; }
  .contact { flex-basis: calc(var(--view-height) * .145); flex-direction: column; gap: 12px; font-size: 16px; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (max-height: 650px) {
  .brand { top: 20px; width: 80px; }
  .portrait { top: 45px; height: 55svh; }
  .announcement { top: 56svh; }
  .while { margin-block: 10px; }
  .contact { min-height: 52px; }
}
@media (max-width: 600px) and (max-height: 650px) {
  .landing { height: auto; min-height: 100svh; }
  .stage { flex: 1 0 490px; }
  .portrait { top: 54px; height: 310px; }
  .announcement { top: auto; margin-top: 330px; }
  .contact { flex: 0 0 110px; }
}