:root {
  --ink: #FFFDF8;
  --ink-soft: rgba(255, 253, 248, 0.82);
  --fallback-bg: #4B3620;
  --shade: rgba(30, 20, 12, 0.55);
  /* How far the photo reaches past the viewport, into the strips behind Safari's bars. */
  --bleed: 160px;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--fallback-bg);
  overscroll-behavior: none;
  /* The absolute photo layer reaches past the bottom; don't let it make the page scrollable. */
  overflow: hidden;
}

body {
  height: 100%;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* iOS 26 Safari draws ordinary page content behind its status bar and toolbar, but cuts fixed
   content off at the toolbar, and a fixed element touching the bottom edge makes it paint the
   toolbar a solid colour. So the photo is drawn twice, both reaching --bleed past each edge:
   - body::after, an ordinary (absolute) layer for the whole screen, which fills the toolbar strip;
   - body::before, a fixed copy of the top half only, which fills the status bar strip.
   Both place the image like `cover` on the same box, with lengths only, so they line up exactly.
   Shade on the right half keeps the text readable over the bright windows; the plant stays untouched. */
body {
  --box-h: calc(100dvh + 2 * var(--bleed));
  --img-w: max(100vw, var(--box-h) * 1376 / 768);
  --img-h: max(100vw * 768 / 1376, var(--box-h));
  --img-focus-x: 0.25;
  --shade-layer: linear-gradient(to right, transparent 40%, var(--shade) 100%);
}

body::before,
body::after {
  content: "";
  top: calc(-1 * var(--bleed));
  left: 0;
  width: 100vw;
  background: var(--shade-layer), url("LandingPageBack.png") no-repeat;
  background-size: 100vw var(--box-h), var(--img-w) var(--img-h);
  background-position:
    0 0,
    calc((100vw - var(--img-w)) * var(--img-focus-x)) calc((var(--box-h) - var(--img-h)) / 2);
}

body::before {
  position: fixed;
  height: calc(var(--box-h) / 2);
  z-index: -1;
}

body::after {
  position: absolute;
  height: var(--box-h);
  z-index: -2;
}

main {
  grid-column: 2;
  align-self: center;
  justify-self: center;
  text-align: left;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

h1 {
  font-size: clamp(3rem, 7vw, 5.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  /* Large type has a wider left side bearing; pull it back so "n" lines up with "C" below. */
  margin: 0 0 0 -0.05em;
}

.soon {
  font-size: clamp(1.375rem, 3vw, 2.375rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  line-height: 1.1;
  margin: 0.1em 0 0;
}

footer {
  grid-column: 1 / -1;
  padding: 24px 0;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--ink-soft);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Portrait phones: the plant fills the screen, so the text moves to the bottom over a darker shade. */
@media (max-aspect-ratio: 1/1) {
  body {
    grid-template-columns: 1fr;
    --img-focus-x: 0.26;
    --shade-layer: linear-gradient(to bottom, transparent 45%, var(--shade) 80%);
  }

  main {
    grid-column: 1;
    align-self: end;
    text-align: center;
    padding-bottom: 8px;
  }
}