/* Landward splash.
   Ported from the Claude Design artboard `Landward Splash.dc.html`.

   --cream is sampled from the artwork's own ground rather than taken from the
   artboard, so the image and the page background are the same colour. That is
   what lets the drawing sit letterboxed or bled off any edge with the join
   staying invisible — nothing here has to hide a seam. Re-sample it if the
   artwork is ever replaced. */

:root {
  --cream: #f6eee7;
  --ink: #231f1c;
  --ink-soft: #4a3f2f;
  --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
}

body {
  font-family: var(--serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgb(74 63 47 / 0.35);
}

a:hover {
  color: var(--ink);
  border-bottom-color: rgb(35 31 28 / 0.6);
}

/* ---- splash ---------------------------------------------------------- */

.splash {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--cream);
  overflow: hidden;
}

/* <picture> is only a format switch; without this it would become the flex
   item on narrow screens and swallow the layout rules meant for the image. */
.splash picture { display: contents; }

/* The artboard specified `cover` at `58% 100%`, which crops the topsail off
   at laptop aspect ratios. `contain` at bottom-right instead fits the whole
   drawing to the screen's height and parks it in the corner, so the rig is
   always complete and the cream it leaves on the left is where the copy
   goes. The sea dissolves on its own well before the drawing's left edge, so
   the letterboxed area needs no mask to hide a cut — it simply reads as page.

   max-width and object-fit are only a guard for viewports tall enough that a
   full-height drawing would overflow sideways. */
.splash__art {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: 100% 100%;
}

.splash__copy {
  position: absolute;
  left: 6.5%;
  top: 13%;
  width: 42%;
  max-width: 660px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1.1vh;
}

.splash__copy h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(28px, 3.75vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.splash__copy p {
  margin: 0;
  font-size: clamp(15px, 1.24vw, 22px);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

/* ---- narrow viewports ------------------------------------------------ */

/* `cover` on a 4:3 drawing inside a tall phone viewport would crop away most
   of the hull and blow the hatching up past its resolution. On a narrow *and*
   tall screen the drawing instead keeps its own aspect ratio and sits on the
   floor of the screen, with the copy stacked above it — the matched ground
   makes the letterboxing read as page background, not as an image edge.

   The min-height guard matters: a landscape phone is narrow but has no room
   to stack, so it stays on the full-bleed treatment above rather than
   overflowing into a scrollbar. */
@media (max-width: 860px) and (min-height: 620px) {
  .splash {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 11vh 7vw 0;
  }

  /* Bleed past the copy's gutter to the screen edges. `order` puts the copy
     on top without moving the <img> off the front of the document, where it
     wants to stay for preload priority; `margin-top: auto` then drops the
     drawing to the floor. */
  .splash__art {
    order: 2;
    position: static;
    width: calc(100% + 14vw);
    max-width: none;
    height: auto;
    margin: auto -7vw 0;
    object-fit: contain;
  }

  .splash__copy {
    order: 1;
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 34ch;
    gap: 10px;
  }

  /* Sized to meet the desktop clamps at the 860px boundary so the type does
     not visibly jump when the layout switches. */
  .splash__copy h1 { font-size: clamp(30px, 4vw, 38px); }
  .splash__copy p  { font-size: clamp(15px, 1.9vw, 18px); }
}