/* hosakas.com — one full-bleed illustration, no scroll, no script. */

/* Subset to just the five distinct letters of "hosakas" (a, h, k, o, s), which is
   why this is 1.3 KB rather than ~40 KB. Regenerate with the Google Fonts text
   API if the wordmark ever changes:
     https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@500&text=hosak
   Requesting that URL with a browser User-Agent returns the woff2 link. */
@font-face {
  font-family: 'Libre Bodoni';
  font-style: normal;
  font-weight: 500;
  /* swap, not block: the artwork should paint immediately rather than hold the
     first frame hostage to a font request. */
  font-display: swap;
  src: url('/fonts/libre-bodoni-hosakas.woff2') format('woff2');
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  /* The artwork is intentionally allowed to overflow the top of the viewport on
     short, wide windows; this is what crops it instead of showing scrollbars. */
  overflow: hidden;
  /* The artwork's own sky colour, so the area above the image on tall viewports is
     indistinguishable from the image itself. Also covers the region behind the
     notch under viewport-fit=cover. */
  background: #d4d3c6;
}

.hero {
  position: fixed;
  inset: 0;
}

/* Anchored to the BOTTOM at full width, rather than stretched to cover.
   The image is 3:2. Covering would scale it to fill the viewport, and on a tall
   screen that crops the sides — which would slice into the wordmark, since the
   wordmark lives at x=460 of 1536. Anchoring bottom-left at full width instead
   means the whole image width is always visible, the hills always bleed edge to
   edge, and any leftover height above is filled by the matching sky colour. */
.hero svg {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}

/* Portrait: at full viewport width a 3:2 image is only a third as tall as a phone
   screen, which leaves the artwork as a thin strip under a vast empty sky and
   shrinks the wordmark to ~37px. Overflow the artwork past both edges instead, so
   the cloud and hills read at a sensible scale. The left offset is what keeps the
   wordmark — which sits left of centre — inside the viewport. */
@media (max-aspect-ratio: 1 / 1) {
  .hero svg {
    /* 250% is about the practical ceiling. Because the artwork is 3:2 and anchored
       bottom, the wordmark's distance from the top works out to
       viewportHeight - 0.42 * artworkHeight — so zooming in raises it and shrinks
       the empty sky. Going further would raise it more, but the wordmark is ~31% of
       the artwork's width, so past this it runs out of side margin. */
    width: 250%;
    left: -25%;
  }
}

.wordmark {
  /* Libre Bodoni is self-hosted, so the fallbacks only matter for the moment
     before it loads (or if the request fails). Bodoni 72 is macOS-only and Bodoni
     MT ships with Windows Office — both are Didones, so the swap stays subtle. */
  font-family: 'Libre Bodoni', 'Bodoni 72', Didot, 'Bodoni MT', 'Times New Roman',
    serif;

  /* USER UNITS, not screen pixels: inside a viewBox, px is artwork-space. A fixed
     value is correct here precisely because the wordmark is part of the artwork —
     it scales with the picture, so it needs no clamp() or viewport units. */
  font-size: 145px;
  font-weight: 500;
  letter-spacing: -0.055em;
  fill: #17351f;
}