/* Styfell Ltd holding page. No JavaScript, no third-party requests. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand tokens */
  --fell-green: #1B2E28;
  --moss: #4A6B5D;
  --stone: #78837E;
  --mist: #DDE3E0;
  --paper: #F7F6F2;
  --bracken: #9C6B3F;

  /* Stone darkened for small text only: 4.6:1 on Paper. Stone itself is 3.6:1, below WCAG AA. */
  --stone-ink: #68726E;

  --font-sans: "Inter", Helvetica, Arial, sans-serif;
  --gutter: clamp(1.75rem, 8vw, 7.5rem);
  --foot: clamp(2.5rem, 6vw, 6rem);
}

html {
  background: var(--paper);
  color: var(--fell-green);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--fell-green);
}

/* One screen: the wordmark in the upper part, the disclosure at the foot, the mark behind. */
body {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto 4fr auto;
  padding: var(--gutter) var(--gutter) var(--foot);
}

main {
  grid-row: 2;
}

.wordmark {
  margin: 0;
  width: clamp(200px, 24vw, 360px);
}

.wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}

.disclosure {
  grid-row: 4;
  max-width: 40em;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--stone-ink);
}

.disclosure p {
  margin: 0;
}

/* The motif is anchored to the bottom edge so the contour arms always run off the page,
   whatever the viewport height. Portrait first. */
.motif {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  color: var(--mist);
}

.motif svg {
  position: absolute;
  display: block;
  aspect-ratio: 388 / 277;
  height: auto;
  width: 195vw;
  left: -13vw;
  bottom: -8vw;
}

/* Portrait: a narrow disclosure column stays clear of the route line. */
@media (max-aspect-ratio: 1/1) {
  .disclosure {
    max-width: 21em;
  }
}

/* Wider portrait screens (tablets): a smaller motif keeps the summit inside the viewport. */
@media (min-width: 600px) and (max-aspect-ratio: 1/1) {
  .motif svg {
    width: 140vw;
    left: -8vw;
  }
}

/* Landscape: the motif enters from the right and bottom edges. */
@media (min-aspect-ratio: 1/1) {
  .motif svg {
    width: 90vw;
    left: 44vw;
    bottom: -27vw;
  }
}

/* Landscape from tablet width up: the wordmark moves towards the vertical middle. */
@media (min-aspect-ratio: 1/1) and (min-width: 768px) {
  body {
    grid-template-rows: 1.8fr auto 1fr auto;
  }

  .disclosure {
    font-size: 0.8125rem;
  }
}

/* Very short landscape viewports (phones on their side): keep the motif off the text. */
@media (min-aspect-ratio: 1/1) and (max-height: 480px) {
  .motif svg {
    width: 120vw;
    left: 40vw;
    bottom: -52vw;
  }
}