/* The landing page, as Ian had it on the photofolio site: one photograph filling
   the window, a slow fade to the next, and the name and the menu laid over it. */
.landing{height:100vh;height:100dvh;overflow:hidden;background:var(--black)}
/* The type is white unless the picture behind it is too light; then it turns dark. */
.landing{--ink:#fff;--ink-dim:rgba(255,255,255,.66);--wash:rgba(10,10,10,.55)}
[data-ink="dark"] .landing{--ink:#141414;--ink-dim:rgba(20,20,20,.7);--wash:rgba(245,242,236,.5)}
.landing-head,.landing-head a,.landing-domain{transition:color var(--fade,1600ms) var(--ease),background var(--fade,1600ms) var(--ease)}
.landing-head{color:var(--ink)}

.cover{position:fixed;inset:0;z-index:1}
.cover img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity var(--fade,1600ms) var(--ease);
}
.cover img.is-on{opacity:1}

/* The photographs carry their own light, so the type sits on a soft corner wash
   rather than a bar across the picture. */
.landing-head{
  position:fixed;left:0;top:0;z-index:5;padding:26px 34px 60px;
  background:radial-gradient(120% 120% at 0% 0%,var(--wash),transparent 70%);
}
.landing-mark{display:flex;align-items:center;gap:11px}
.landing-mark .rubric-mark{
  display:block;width:21px;height:26px;flex:none;background:var(--ink);opacity:.95;
  -webkit-mask:url(../assets/logo.png) center/contain no-repeat;
          mask:url(../assets/logo.png) center/contain no-repeat;
}
.landing-name{margin:0;font-family:var(--display);font-weight:500;font-size:23px;letter-spacing:.05em;line-height:1}
.landing-domain{
  margin:6px 0 0 32px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);
}

.landing-nav{display:flex;flex-direction:column;gap:5px;margin:30px 0 0 32px}
.landing-nav a{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);
  width:max-content;transition:color .35s var(--ease);
}
.landing-nav a:hover,.landing-nav a:focus-visible{color:var(--ink)}
.landing-nav .is-apart{margin-top:14px}

@media (max-width:720px){
  .landing-head{padding:18px 18px 48px}
  .landing-name{font-size:19px}
  .landing-domain{margin-left:32px}
  .landing-nav{gap:7px;margin-top:24px}
  .landing-nav a{font-size:10.5px;letter-spacing:.18em}
}

@media (prefers-reduced-motion:reduce){
  .cover img{transition-duration:400ms}
}

/* A phone on its side: room to scroll, so a swipe up lets Safari fold its tabs and
   address bar away. The picture and the menu are fixed, so nothing moves. */
@media (orientation:landscape) and (max-height:560px){
  .landing{height:auto;min-height:calc(100lvh + 48px);overflow:visible}
}