:root {
  color-scheme: light;
  --paper: #fbf8f7;
  --ink: #1b252c;
  --muted: #59636b;
  --page-inset: clamp(20px, 7.18vw, 152px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --coast-position: center;
  --coast-veil: linear-gradient(97deg,
    var(--paper) 0%,
    rgb(251 248 247 / 98%) 18%,
    rgb(251 248 247 / 85%) 28%,
    rgb(251 248 247 / 45%) 42%,
    rgb(251 248 247 / 0%) 62%);
  --content-left: max(var(--page-inset), calc(env(safe-area-inset-left, 0px) + 12px));
  --content-right: max(var(--page-inset), calc(env(safe-area-inset-right, 0px) + 12px));
}

* { box-sizing: border-box; }
html { background: var(--paper); }
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 7px; border-radius: 2px; }

.page {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: max(clamp(12px, 3dvh, 32px), var(--safe-top));
  padding-bottom: max(clamp(12px, 3dvh, 32px), var(--safe-bottom));
}

/* The photograph extends behind Safari's floating UI instead of being clipped
   to the smaller, changing content viewport. Keep it outside .page. */
.backdrop {
  position: fixed;
  z-index: 0;
  inset: 0 0 auto;
  height: 100vh;
  height: 100lvh;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--paper);
}

/* Cover both axes at every aspect ratio. The veil belongs to the viewport,
   not the photograph, so cropping never exposes a hard image edge. */
.coast,
.backdrop::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.backdrop::after { content: ""; background: var(--coast-veil); }
.coast {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--coast-position);
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.coast.is-ready { opacity: 1; }
.coast.is-cached { transition: none; }

.socials { display: flex; align-items: center; }
.separator { flex-shrink: 0; width: 1px; }

.intro {
  margin-left: var(--content-left);
  /* Center the whole group; a small optical offset varies continuously. */
  transform: translateY(clamp(max(-24px, -3dvh), calc(5vw - 50px), min(20px, 3dvh)));
  width: max-content;
  max-width: calc(100% - var(--content-left) - var(--content-right));
}
h1 {
  margin: 0;
  font-size: min(clamp(58px, 5.5vw, 112px), clamp(32px, 10dvh, 112px));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
h1 span { display: block; }
.welcome { margin: clamp(12px, 2.5dvh, 24px) 0 0; font-size: min(clamp(20px, 1.7vw, 30px), clamp(16px, 4dvh, 30px)); line-height: 1.45; letter-spacing: -0.02em; color: var(--muted); }
.rule { width: clamp(52px, 3.6vw, 60px); height: 1px; margin-top: clamp(12px, 3.4dvh, 32px); background: #c8cbcc; }
.details { margin: clamp(12px, 3dvh, 28px) 0 0; font-size: min(clamp(18px, 1.4vw, 20px), clamp(14px, 3.3dvh, 20px)); line-height: 1.6; letter-spacing: -0.01em; color: var(--muted); }
.socials { gap: clamp(16px, 1.4vw, 20px); margin-top: clamp(12px, 3dvh, 28px); margin-left: -8px; color: #444c51; }
.socials a {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: color 160ms ease, background-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.socials a:focus-visible { outline-offset: 3px; }
.socials a:active { background-color: rgb(27 37 44 / 10%); }
.socials .separator { height: 20px; background: #d9dcdd; }
.socials svg { display: block; width: 28px; height: 28px; }

@media (hover: hover) {
  .socials a:hover { color: var(--ink); background-color: rgb(27 37 44 / 6%); }
}

@media (prefers-reduced-motion: reduce) {
  .coast,
  .socials a { transition: none; }
}

@media (max-width: 700px) {
  :root {
    --coast-veil: linear-gradient(100deg, rgb(251 248 247 / 98%) 0%, rgb(251 248 247 / 92%) 35%, rgb(251 248 247 / 55%) 68%, rgb(251 248 247 / 8%) 100%);
  }
}

/* iOS Safari paints the root canvas into browser-adjacent areas. A fixed
   backdrop instead lets its solid color be sampled for toolbar extension. */
@supports (-webkit-touch-callout: none) {
  html {
    --coast-image: none;
    /* Browser chrome affects canvas extent, never the photo's aspect ratio
       or the content layout. No device-specific sizes or image offsets. */
    --browser-bleed: calc(var(--safe-top) + var(--safe-bottom) + 100lvh - 100svh);
    --canvas-height: calc(100lvh + var(--browser-bleed));
    /* iOS does not extend the root background's paint rect beyond the
       document. Enlarge its actual canvas as well as the image. Root overflow
       remains hidden, while .page keeps content inside the dynamic viewport. */
    height: var(--canvas-height);
    /* Safari may cover the status area with its own opaque surface. Match
       that paper color at the page edge, then reveal the original sky. */
    background-image: linear-gradient(var(--paper), transparent 12lvh), var(--coast-veil), var(--coast-image);
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center, center, var(--coast-position);
  }

  /* Retain the img for high-priority loading and decode(), but don't let a
     viewport-fixed surface supply a solid browser toolbar background. */
  .backdrop { position: absolute; visibility: hidden; background: transparent; }
}