@font-face {
  font-family: "Huavela Serif";
  src: url("/assets/serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Huavela Sans";
  src: url("/assets/sans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #e8f4fa;
  --ink: #14394f;
  --accent: #3999c6;
  --muted: #5c7b8d;
  --line: #bfd7e1;
  --address: #355d72;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: "Huavela Sans", sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #c2d8c8; color: var(--ink); }
.page { min-height: 100svh; display: grid; grid-template-columns: 58% 42%; }
.identity { min-width: 0; display: flex; flex-direction: column; padding: clamp(32px, 4.5vw, 76px); }
.masthead { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 42px; height: 42px; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.company-name { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; }
.wordmark { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 84px 0 108px; }
h1 { margin: 0; font-family: "Huavela Serif", Georgia, serif; font-size: clamp(84px, 12.5vw, 224px); font-weight: 400; line-height: .96; letter-spacing: -.065em; }
.period { color: var(--accent); }
.flourish { width: clamp(98px, 12vw, 174px); height: auto; margin: 25px 0 0 7px; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.contact { display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 460px; }
.contact-item { border-top: 1px solid var(--line); padding-top: 16px; }
.label { display: block; color: var(--muted); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 13px; }
.email-link { display: inline-flex; align-items: center; gap: 24px; min-height: 28px; color: #214f68; font-size: clamp(17px, 1.65vw, 23px); text-decoration: none; }
.email-link span { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .22s ease; }
.email-link svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
.email-link:hover span { background-size: 100% 1px; }
.email-link:hover svg { transform: translate(2px, -2px); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 7px; border-radius: 2px; }
address { color: var(--address); font-size: clamp(13px, 1.05vw, 15px); font-style: normal; line-height: 1.8; }
.ocean { position: relative; min-height: 100svh; margin: 0; overflow: hidden; background: #7ab8cf; }
.ocean picture { display: block; width: 100%; height: 100%; }
.ocean img { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 46% center; }
.image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 57 79 / .04), transparent 43%, rgb(14 54 76 / .20)); pointer-events: none; }
.ocean-mark { position: absolute; bottom: clamp(32px, 4.5vw, 76px); right: clamp(32px, 4.5vw, 76px); width: 82px; height: 82px; color: #f5f3eb; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

@media (min-width: 1500px) {
  .contact { grid-template-columns: 1fr 1.3fr; max-width: none; gap: 30px; }
  .email-link { font-size: 20px; gap: 14px; }
}

@media (max-width: 1000px) and (min-width: 701px) {
  .page { grid-template-columns: 60% 40%; }
  .identity { padding: 32px; }
  h1 { font-size: 12.5vw; }
  .wordmark { padding: 70px 0; }
}

@media (max-width: 700px) {
  .page { min-height: 100svh; display: flex; flex-direction: column; }
  .identity { padding: 28px 26px 32px; }
  .masthead { gap: 11px; }
  .brand-mark { width: 34px; height: 34px; }
  .company-name { font-size: 10px; }
  .wordmark { padding: 76px 0 59px; }
  h1 { font-size: clamp(76px, 22vw, 145px); }
  .flourish { margin-top: 19px; width: 111px; }
  .contact { gap: 23px; max-width: none; }
  .contact-item { padding-top: 13px; }
  .label { font-size: 9px; margin-bottom: 9px; }
  .email-link { font-size: 19px; gap: 22px; min-height: 30px; }
  address { font-size: 13px; }
  .ocean { min-height: 0; height: 38svh; max-height: 450px; flex: 1 0 240px; }
  .ocean img { object-position: center center; }
  .ocean-mark { bottom: 24px; right: 26px; width: 62px; height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}