:root{
  /* --snow matches the photo's background so the image edge disappears. */
  --snow:#FAFDFF;--ink:#1E2433;--muted:#565D6D;--red:#FF0000;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --margin:clamp(16px,3vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:var(--snow);color:var(--ink);font-family:var(--sans);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.5}
img{display:block;max-width:100%;height:auto}
p{margin:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.top{padding:var(--margin) var(--margin) 0;position:relative;z-index:2}
.logo{width:clamp(180px,22vw,320px)}

/* Desktop: the photo sits bottom right at its full aspect ratio.
   The empty snow on its left holds the text. */
.hero{position:relative;container-type:size;min-height:420px}
.photo img{position:absolute;right:0;bottom:0;width:min(100cqw,166.67cqh);height:auto;
  /* Fade the top and left edges so the photo's snow melts into the page. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 40%),linear-gradient(to bottom,transparent,#000 6%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 40%),linear-gradient(to bottom,transparent,#000 6%);
  mask-composite:intersect}
.copy{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;padding-inline:var(--margin);max-width:min(46%,34rem)}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,1.4rem + 3.6vw,5rem);line-height:1.02;letter-spacing:-.015em;margin:0;text-wrap:balance}
.lede{margin-top:clamp(16px,2vw,28px);font-size:clamp(1.125rem,1rem + .5vw,1.5rem);line-height:1.4;color:var(--muted);max-width:28ch;text-wrap:pretty}

.lost{padding:clamp(40px,8vw,120px) var(--margin)}
.lost a{color:var(--ink);text-underline-offset:.18em}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding:20px var(--margin);font-size:.9375rem;color:var(--muted);border-top:1px solid #E3E8EE}

/* Narrow or portrait screens: text first, photo below, cropped to the child. */
@media (max-width:760px),(max-aspect-ratio:5/4){
  .hero{container-type:normal;min-height:0;display:flex;flex-direction:column}
  .copy{max-width:none;height:auto;padding-block:clamp(28px,6vw,56px) clamp(20px,5vw,40px)}
  .photo{margin-top:auto}
  .photo img{position:static;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:100% 50%}
  .foot{flex-direction:column}
}